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 במקום להסיר; התוכן יוצא לפני שהוא מוסר.
החזרה במהלך יציאה ממשיכה מהערכים הנוכחיים.
תוכן שמופיע שוב נכנס מה־pose exit.
הרינדור הראשון מציג אותו במנוחה, כך שתוכן שכבר קיים לא מהבהב.

מתאים ל־

הודעה על טיוטה שנשמרה.
הודעת קופון בתשלום.
הודעת שגיאה מתחת לשדה.

Props

Prop	טיפוס	ברירת מחדל	תיאור
`present`	`boolean`	`—`חובה	להציג או להסתיר את התוכן. שנו את זה במקום להסיר.
`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

ה־poses משתמשים ב־opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width ו־height. onExitComplete רץ אחרי שהתוכן יצא.

אותם poses ו־props עובדים ב־React Native.

בשימוש בדוגמאות האלה

סיכום תשלוםכמויות, סכומי שורות והסכום הכולל מתגלגלים כשהעגלה משתנה; הודעת הקופון נכנסת ויוצאת; תשלום דורש החזקה מכוונת.MotionListMotionNumberMotionPresenceMotionHold