MotionPresence

İçeriği girip çıkarken bağlı tutar.

WebReact Nativeİçerik ve boyut

Deneyin

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

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

En kısa kullanım

Notice.jsx

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

Sizin yerinize hallettikleri

Ayırmak yerine present'i değiştirin; içerik kaldırılmadan önce ayrılır.
Çıkış sırasında geri getirmek mevcut değerlerden devam eder.
Yeniden beliren içerik exit pose'undan girer.
İlk render onu durgun hâlde gösterir; zaten orada olan içerik yanıp sönmez.

Şunlar için kullanın

Taslağın kaydedildiğine dair bir bildirim.
Ödeme sayfasında bir kupon mesajı.
Bir alanın altında hata mesajı.

Props

Prop	Tip	Varsayılan	Açıklama
`present`	`boolean`	`—`zorunlu	İçeriği gösterir ya da gizler. Ayırmak yerine bunu değiştirin.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Durgun hâldeki pose.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	İçeriğin ayrılırken aldığı ve girerken başladığı pose.
`as`	`element`	`'div'`	Render edilecek öğe.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.
`onExitComplete`	`() => void`		İçerik ayrılıp kaldırıldıktan sonra çalışır.

Diğer props render edilen öğeye gider; böylece className, style ve olay işleyiciler her zamanki gibi çalışır.

Web ve React Native

Pose'lar opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width ve height kullanır. onExitComplete içerik ayrıldıktan sonra çalışır.

Aynı pose'lar ve props React Native'de çalışır.

Bu örneklerde kullanıldı

Ödeme özetiSepet değiştikçe adetler, satır toplamları ve genel toplam döner; kupon bildirimi girip çıkar; ödeme bilinçli bir basılı tutma gerektirir.MotionListMotionNumberMotionPresenceMotionHold