MotionPresence

Hält Inhalt gemountet, während er ein- und ausblendet.

WebReact NativeInhalt und Größe

Ausprobieren

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

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

Kürzeste Nutzung

Notice.jsx

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

Was sie dir abnimmt

Ändere present, statt zu unmounten; der Inhalt geht ab, bevor er entfernt wird.
Wiederherstellen während eines Abgangs setzt bei den aktuellen Werten an.
Inhalt, der wieder erscheint, kommt aus der exit-Pose herein.
Der erste Render zeigt ihn in Ruhe, sodass bereits vorhandener Inhalt nicht aufblitzt.

Gut für

Ein Hinweis „Entwurf gespeichert“.
Eine Gutscheinmeldung im Checkout.
Eine Fehlermeldung unter einem Feld.

props

Prop	Typ	Standard	Beschreibung
`present`	`boolean`	`—`erforderlich	Inhalt zeigen oder verbergen. Ändere das, statt zu unmounten.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Die Pose in Ruhe.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Die Pose, mit der der Inhalt geht und aus der er kommt.
`as`	`element`	`'div'`	Das zu rendernde Element.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.
`onExitComplete`	`() => void`		Läuft, nachdem der Inhalt abgegangen und entfernt ist.

Weitere props gehen an das gerenderte Element, also funktionieren className, style und Event-Handler wie gewohnt.

Web und React Native

Posen nutzen opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width und height. onExitComplete läuft, nachdem der Inhalt abgegangen ist.

Dieselben Posen und props funktionieren unter React Native.

Verwendet in diesen Beispielen

Checkout-ÜbersichtMengen, Zeilensummen und die Gesamtsumme rollen, wenn sich der Warenkorb ändert; der Gutscheinhinweis erscheint und verschwindet; Bezahlen erfordert bewusstes Halten.MotionListMotionNumberMotionPresenceMotionHold