MotionPresence

เก็บเนื้อหาให้ mount อยู่ขณะเคลื่อนไหวเข้าและออก

เว็บReact Nativeเนื้อหาและขนาด

ลองดู

กำลังเตรียมตัวอย่าง…

JavaScript ถูกปิดอยู่ โค้ดด้านล่างคือตัวอย่างฉบับสมบูรณ์

App.jsx

import { useState } from 'react';
import { MotionPresence } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const exits = {
  rise: { opacity: 0, translateY: -16 },
  fall: { opacity: 0, translateY: 16 },
  shrink: { opacity: 0, scale: 0.9 },
};

export default function App({ exit = 'rise', duration = 320 }) {
  const [visible, setVisible] = useState(true);
  const [saved, setSaved] = useState(1);

  const save = () => {
    setSaved(saved + 1);
    setVisible(true);
  };

  return (
    <div className="stage">
      <div className="slot">
        <MotionPresence
          present={visible}
          exit={exits[exit]}
          transition={{ duration, easing: 'easeOut' }}
          className="notice"
        >
          <span>Draft {saved} saved</span>
          <button onClick={() => setVisible(false)}>Dismiss</button>
        </MotionPresence>
      </div>
      <div className="buttons">
        <button onClick={save}>Save draft</button>
        <button onClick={() => setVisible(!visible)}>{visible ? 'Hide' : 'Show'} notice</button>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 40px 20px;
}

.slot {
  display: grid;
  place-items: center;
  min-height: 64px;
  width: min(100%, 420px);
}

.notice {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border-radius: 14px;
  background: #0e2e24;
  color: #fff;
}

.notice button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: none;
  color: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.buttons button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons button:first-child {
  border-color: #176b52;
  background: #176b52;
  color: #fff;
}

การใช้งานที่สั้นที่สุด

Notice.jsx

<MotionPresence present={visible} exit={{ opacity: 0, translateY: -12 }}>
  Draft saved
</MotionPresence>;

สิ่งที่มันจัดการให้คุณ

เปลี่ยน present แทนการ unmount เนื้อหาจะออกไปก่อนถูกนำออก
การคืนกลับระหว่างการออกจะทำต่อจากค่าปัจจุบัน
เนื้อหาที่ปรากฏอีกครั้งจะเข้ามาจาก pose exit
การเรนเดอร์แรกแสดงในสถานะพัก เนื้อหาที่มีอยู่แล้วจึงไม่กะพริบ

ใช้สำหรับ

ประกาศว่าบันทึกฉบับร่างแล้ว
ข้อความเรื่องคูปองในหน้าชำระเงิน
ข้อความข้อผิดพลาดใต้ช่องกรอก

Props

Prop	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`present`	`boolean`	`—`จำเป็น	แสดงหรือซ่อนเนื้อหา เปลี่ยนค่านี้แทนการ unmount
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	pose ขณะพัก
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	pose ที่เนื้อหาใช้ตอนออกและเข้ามาจาก
`as`	`element`	`'div'`	องค์ประกอบที่จะเรนเดอร์
`transition`	`Transition`	`spring`	เส้นโค้ง timing `{ duration, easing }` หรือสปริง `{ tempo: 'spring', spring }` สปริงรักษาโมเมนตัมไว้เมื่อถูกขัดจังหวะ
`onExitComplete`	`() => void`		ทำงานหลังเนื้อหาออกไปและถูกนำออกแล้ว

props อื่นจะส่งต่อไปยังองค์ประกอบที่เรนเดอร์ className, style และตัวจัดการเหตุการณ์จึงทำงานตามปกติ

เว็บและ React Native

pose ใช้ opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width และ height onExitComplete ทำงานหลังเนื้อหาออกไปแล้ว

pose และ props เดียวกันใช้ได้บน React Native

ใช้ในตัวอย่างเหล่านี้

สรุปการชำระเงินจำนวน ยอดต่อรายการ และยอดรวมหมุนเมื่อตะกร้าเปลี่ยน ประกาศคูปองเข้าและออก การชำระเงินต้องกดค้างอย่างตั้งใจMotionListMotionNumberMotionPresenceMotionHold