MotionPresence

يُبقي المحتوى مركّبًا أثناء دخوله وخروجه بحركة.

الويب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 بدل الإزالة؛ يغادر المحتوى قبل أن يُزال.
الاستعادة أثناء الخروج تكمل من القيم الحالية.
المحتوى الذي يظهر مجددًا يدخل من وضعية exit.
يُظهره العرض الأول في حالة السكون، فلا يومض المحتوى الموجود مسبقًا.

استخدمه لـ

إشعار بحفظ المسودة.
رسالة قسيمة في صفحة الدفع.
رسالة خطأ تحت حقل.

Props

Prop	النوع	الافتراضي	الوصف
`present`	`boolean`	`—`إلزامي	أظهر المحتوى أو أخفه. غيّر هذا بدل الإزالة.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	الوضعية في السكون.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	الوضعية التي يغادر بها المحتوى ويدخل منها.
`as`	`element`	`'div'`	العنصر المراد عرضه.
`transition`	`Transition`	`spring`	منحنى توقيت `{ duration, easing }` أو نابض `{ tempo: 'spring', spring }`. تحتفظ النوابض بزخمها عند المقاطعة.
`onExitComplete`	`() => void`		يعمل بعد أن يغادر المحتوى ويُزال.

تذهب props الأخرى إلى العنصر المعروض، فتعمل className وstyle ومعالجات الأحداث كالمعتاد.

الويب وReact Native

تستخدم الوضعيات opacity وtranslateX وtranslateY وscale وscaleX وscaleY وrotate وwidth وheight. ويعمل onExitComplete بعد مغادرة المحتوى.

تعمل الوضعيات وprops نفسها في React Native.

مستخدم في هذه الأمثلة

ملخص الدفعتتدحرج الكميات ومجاميع الأسطر والإجمالي مع تغيّر السلة؛ ويدخل إشعار القسيمة ويخرج؛ والدفع يتطلب ضغطًا مطوّلًا مقصودًا.MotionListMotionNumberMotionPresenceMotionHold