MotionPresence

Menjaga konten tetap terpasang saat beranimasi masuk dan keluar.

WebReact NativeKonten dan ukuran

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Penggunaan terpendek

Notice.jsx

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

Yang ditanganinya untuk Anda

Ubah present alih-alih melakukan unmount; konten pergi sebelum dihapus.
Memulihkan saat keluar melanjutkan dari nilai saat ini.
Konten yang muncul lagi masuk dari pose exit.
Render pertama menampilkannya dalam keadaan diam, jadi konten yang sudah ada tidak berkedip.

Gunakan untuk

Pemberitahuan draf tersimpan.
Pesan kupon di halaman checkout.
Pesan kesalahan di bawah sebuah field.

Props

Prop	Tipe	Bawaan	Deskripsi
`present`	`boolean`	`—`wajib	Tampilkan atau sembunyikan konten. Ubah ini alih-alih melakukan unmount.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Pose saat diam.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Pose saat konten pergi dan tempat asal saat ia masuk.
`as`	`element`	`'div'`	Elemen yang dirender.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.
`onExitComplete`	`() => void`		Berjalan setelah konten pergi dan dihapus.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

Pose memakai opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width, dan height. onExitComplete berjalan setelah konten pergi.

Pose dan props yang sama bekerja di React Native.

Dipakai di contoh-contoh ini

Ringkasan checkoutJumlah, total per baris, dan total keseluruhan bergulir saat keranjang berubah; pemberitahuan kupon masuk dan pergi; membayar memerlukan tahanan yang disengaja.MotionListMotionNumberMotionPresenceMotionHold