MotionPresence

Houdt inhoud gemount terwijl die in- en uitanimeert.

WebReact NativeInhoud en grootte

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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

Kortste gebruik

Notice.jsx

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

Wat het voor je regelt

Verander present in plaats van te unmounten; de inhoud vertrekt voordat hij wordt verwijderd.
Terugzetten tijdens een vertrek gaat verder vanaf de huidige waarden.
Inhoud die weer verschijnt, komt binnen vanuit de exit-pose.
De eerste render toont hem in rust, dus inhoud die er al is knippert niet.

Gebruik het voor

Een melding dat een concept is opgeslagen.
Een couponbericht bij het afrekenen.
Een foutmelding onder een veld.

Props

Prop	Type	Standaard	Beschrijving
`present`	`boolean`	`—`verplicht	Toon of verberg de inhoud. Verander dit in plaats van te unmounten.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	De pose in rust.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	De pose waarmee de inhoud vertrekt en waaruit hij binnenkomt.
`as`	`element`	`'div'`	Het element dat wordt gerenderd.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.
`onExitComplete`	`() => void`		Draait nadat de inhoud is vertrokken en verwijderd.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

Poses gebruiken opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width en height. onExitComplete draait nadat de inhoud is vertrokken.

Dezelfde poses en props werken in React Native.

Gebruikt in deze voorbeelden

AfrekenoverzichtAantallen, regeltotalen en het totaal rollen als de winkelwagen verandert; de couponmelding komt en gaat; betalen vraagt een bewuste druk.MotionListMotionNumberMotionPresenceMotionHold