MotionPresence

Mantiene el contenido montado mientras entra y sale animado.

WebReact NativeContenido y tamaño

Pruébalo

Preparando el ejemplo…

JavaScript está desactivado. El código de abajo es el ejemplo 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;
}

Uso mínimo

Notice.jsx

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

Lo que resuelve por ti

Cambia present en lugar de desmontar; el contenido sale antes de eliminarse.
Restaurarlo durante una salida continúa desde los valores actuales.
El contenido que vuelve a aparecer entra desde la pose exit.
El primer render lo muestra en reposo, así que el contenido que ya estaba no parpadea.

Úsalo para

Un aviso de borrador guardado.
Un mensaje de cupón en un pago.
Un mensaje de error bajo un campo.

Props

Prop	Tipo	Por defecto	Descripción
`present`	`boolean`	`—`obligatoria	Muestra u oculta el contenido. Cambia esto en lugar de desmontar.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	La pose en reposo.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	La pose con la que el contenido sale y desde la que entra.
`as`	`element`	`'div'`	El elemento que se renderiza.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.
`onExitComplete`	`() => void`		Se ejecuta después de que el contenido haya salido y se haya eliminado.

Las demás props van al elemento renderizado, así que className, style y los manejadores de eventos funcionan como siempre.

Web y React Native

Las poses usan opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width y height. onExitComplete se ejecuta después de que el contenido haya salido.

Las mismas poses y props funcionan en React Native.

Se usa en estos ejemplos

Resumen del pagoLas cantidades, los subtotales y el total ruedan cuando cambia el carrito; el aviso del cupón entra y sale; pagar requiere mantener pulsado a propósito.MotionListMotionNumberMotionPresenceMotionHold