MotionPresence

Mantiene montato il contenuto mentre entra ed esce con un’animazione.

WebReact NativeContenuto e dimensione

Provalo

Preparazione dell’esempio…

JavaScript è disattivato. Il codice qui sotto è l’esempio completo.

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

L’uso più breve

Notice.jsx

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

Di che cosa si occupa al posto tuo

Cambia present invece di smontare; il contenuto esce prima di essere rimosso.
Ripristinarlo durante un’uscita prosegue dai valori attuali.
Il contenuto che ricompare entra dalla pose exit.
Il primo render lo mostra a riposo, così il contenuto già presente non lampeggia.

Usalo per

Un avviso di bozza salvata.
Un messaggio sul coupon in un checkout.
Un messaggio di errore sotto un campo.

Props

Prop	Tipo	Predefinito	Descrizione
`present`	`boolean`	`—`obbligatoria	Mostra o nasconde il contenuto. Cambia questa invece di smontare.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	La pose a riposo.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	La pose con cui il contenuto esce e da cui entra.
`as`	`element`	`'div'`	L’elemento da renderizzare.
`transition`	`Transition`	`spring`	Una curva di timing `{ duration, easing }` o una molla `{ tempo: 'spring', spring }`. Le molle conservano lo slancio quando vengono interrotte.
`onExitComplete`	`() => void`		Viene eseguito dopo che il contenuto è uscito ed è stato rimosso.

Le altre props vanno all’elemento renderizzato, quindi className, style e gli event handler funzionano come sempre.

Web e React Native

Le pose usano opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width e height. onExitComplete viene eseguito dopo l’uscita del contenuto.

Le stesse pose e props funzionano su React Native.

Usato in questi esempi

Riepilogo del checkoutQuantità, totali di riga e totale scorrono man mano che il carrello cambia; l’avviso del coupon entra ed esce; pagare richiede di tenere premuto di proposito.MotionListMotionNumberMotionPresenceMotionHold