MotionPresence

Mantém o conteúdo montado enquanto ele entra e sai animado.

WebReact NativeConteúdo e tamanho

Experimente

Preparando o exemplo…

O JavaScript está desativado. O código abaixo é o exemplo 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 mais curto

Notice.jsx

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

O que ele resolve para você

Mude present em vez de desmontar; o conteúdo sai antes de ser removido.
Restaurar durante uma saída continua dos valores atuais.
Conteúdo que aparece de novo entra a partir da pose exit.
O primeiro render mostra em repouso, então conteúdo que já estava ali não pisca.

Use para

Um aviso de rascunho salvo.
Uma mensagem de cupom no checkout.
Uma mensagem de erro embaixo de um campo.

Props

Prop	Tipo	Padrão	Descrição
`present`	`boolean`	`—`obrigatória	Mostra ou oculta o conteúdo. Mude isto em vez de desmontar.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	A pose em repouso.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	A pose com que o conteúdo sai e a partir da qual entra.
`as`	`element`	`'div'`	O elemento a renderizar.
`transition`	`Transition`	`spring`	Uma curva de tempo `{ duration, easing }` ou uma mola `{ tempo: 'spring', spring }`. As molas mantêm o embalo quando interrompidas.
`onExitComplete`	`() => void`		Roda depois que o conteúdo saiu e foi removido.

As outras props vão para o elemento renderizado, então className, style e handlers de eventos funcionam normalmente.

Web e React Native

As poses usam opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width e height. onExitComplete roda depois que o conteúdo saiu.

As mesmas poses e props funcionam no React Native.

Usado nestes exemplos

Resumo do pedidoQuantidades, subtotais e o total rolam quando o carrinho muda; o aviso do cupom entra e sai; pagar exige segurar de propósito.MotionListMotionNumberMotionPresenceMotionHold