MotionPresence

Garde le contenu monté pendant ses animations d’entrée et de sortie.

WebReact NativeContenu et taille

Essayer

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple 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;
}

Usage minimal

Notice.jsx

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

Ce qu’il gère pour vous

Changez present au lieu de démonter ; le contenu sort avant d’être retiré.
Le réafficher pendant une sortie repart des valeurs actuelles.
Un contenu qui réapparaît entre depuis la pose exit.
Le premier rendu l’affiche au repos : un contenu déjà présent ne clignote pas.

À utiliser pour

Un avis de brouillon enregistré.
Un message de code promo au paiement.
Un message d’erreur sous un champ.

Props

Prop	Type	Défaut	Description
`present`	`boolean`	`—`obligatoire	Afficher ou masquer le contenu. Modifiez ceci au lieu de démonter.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	La pose au repos.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	La pose avec laquelle le contenu sort et depuis laquelle il entre.
`as`	`element`	`'div'`	L’élément à rendre.
`transition`	`Transition`	`spring`	Une courbe de temps `{ duration, easing }` ou un ressort `{ tempo: 'spring', spring }`. Les ressorts gardent leur élan quand ils sont interrompus.
`onExitComplete`	`() => void`		S’exécute une fois le contenu sorti et retiré.

Les autres props vont à l’élément rendu : className, style et les gestionnaires d’événements fonctionnent comme d’habitude.

Web et React Native

Les poses utilisent opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width et height. onExitComplete s’exécute une fois le contenu sorti.

Les mêmes poses et props fonctionnent sur React Native.

Utilisé dans ces exemples

Récapitulatif de commandeLes quantités, les totaux par ligne et le total défilent quand le panier change ; l’avis de code promo entre et sort ; payer demande un appui maintenu délibéré.MotionListMotionNumberMotionPresenceMotionHold