MotionPresence

Giữ nội dung được gắn trong lúc nó hoạt ảnh vào và ra.

WebReact NativeNội dung và kích thước

Thử ngay

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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;
}

Cách dùng ngắn nhất

Notice.jsx

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

Những gì nó xử lý giúp bạn

Đổi present thay vì unmount; nội dung rời đi trước khi bị gỡ.
Khôi phục giữa lúc thoát sẽ tiếp tục từ giá trị hiện tại.
Nội dung xuất hiện lại sẽ đi vào từ pose exit.
Lần render đầu hiện nó ở trạng thái nghỉ, nên nội dung đã có sẵn không bị nháy.

Dùng cho

Thông báo đã lưu bản nháp.
Thông báo mã giảm giá khi thanh toán.
Thông báo lỗi dưới một trường.

Props

Prop	Kiểu	Mặc định	Mô tả
`present`	`boolean`	`—`bắt buộc	Hiện hoặc ẩn nội dung. Đổi giá trị này thay vì unmount.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Pose khi nghỉ.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Pose mà nội dung rời đi và đi vào từ đó.
`as`	`element`	`'div'`	Phần tử được render.
`transition`	`Transition`	`spring`	Đường cong timing `{ duration, easing }` hoặc lò xo `{ tempo: 'spring', spring }`. Lò xo giữ đà khi bị ngắt.
`onExitComplete`	`() => void`		Chạy sau khi nội dung đã rời đi và bị gỡ.

Các props khác được chuyển tới phần tử được render, nên className, style và trình xử lý sự kiện hoạt động như bình thường.

Web và React Native

Pose dùng opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width và height. onExitComplete chạy sau khi nội dung đã rời đi.

Cùng pose và props hoạt động trên React Native.

Được dùng trong các ví dụ này

Tóm tắt thanh toánSố lượng, tổng từng dòng và tổng tiền cuộn khi giỏ hàng thay đổi; thông báo mã giảm giá đi vào và rời đi; thanh toán đòi hỏi nhấn giữ có chủ đích.MotionListMotionNumberMotionPresenceMotionHold