MotionPresence

Păstrează conținutul montat în timp ce intră și iese animat.

WebReact NativeConținut și mărime

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Cea mai scurtă utilizare

Notice.jsx

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

Ce rezolvă în locul dumneavoastră

Schimbați present în loc să demontați; conținutul pleacă înainte de a fi eliminat.
Restaurarea în timpul unei ieșiri continuă de la valorile curente.
Conținutul care reapare intră din poza exit.
Prima randare îl arată în repaus, așa că un conținut deja prezent nu clipește.

Folosiți-o pentru

O notificare de ciornă salvată.
Un mesaj de cupon la finalizarea comenzii.
Un mesaj de eroare sub un câmp.

Props

Prop	Tip	Implicit	Descriere
`present`	`boolean`	`—`obligatoriu	Arată sau ascunde conținutul. Schimbați asta în loc să demontați.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Poza în repaus.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Poza cu care pleacă și din care intră conținutul.
`as`	`element`	`'div'`	Elementul de randat.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.
`onExitComplete`	`() => void`		Rulează după ce conținutul a plecat și a fost eliminat.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

Pozele folosesc opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width și height. onExitComplete rulează după ce conținutul a plecat.

Aceleași poze și props funcționează în React Native.

Folosită în aceste exemple

Rezumatul comenziiCantitățile, totalurile pe rând și totalul se rotesc când se schimbă coșul; notificarea de cupon intră și pleacă; plata cere o apăsare lungă deliberată.MotionListMotionNumberMotionPresenceMotionHold