MotionPresence

Håller innehåll monterat medan det animeras in och ut.

WebbReact NativeInnehåll och storlek

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kortaste användning

Notice.jsx

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

Det här sköter den åt dig

Ändra present i stället för att avmontera; innehållet lämnar innan det tas bort.
Att återställa under en utgång fortsätter från de aktuella värdena.
Innehåll som dyker upp igen kommer in från exit-posen.
Första renderingen visar det i vila, så innehåll som redan finns blinkar inte.

Använd den för

En notis om att ett utkast sparats.
Ett meddelande om rabattkod i kassan.
Ett felmeddelande under ett fält.

Props

Prop	Typ	Standard	Beskrivning
`present`	`boolean`	`—`krävs	Visa eller dölj innehållet. Ändra det här i stället för att avmontera.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Posen i vila.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Posen som innehållet lämnar med och kommer in från.
`as`	`element`	`'div'`	Elementet som renderas.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.
`onExitComplete`	`() => void`		Körs efter att innehållet har lämnat och tagits bort.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

Poser använder opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width och height. onExitComplete körs när innehållet har lämnat.

Samma poser och props fungerar i React Native.

Används i de här exemplen

KassasammanfattningAntal, radsummor och totalen rullar när varukorgen ändras; rabattmeddelandet kommer och går; att betala kräver ett avsiktligt nedhållet tryck.MotionListMotionNumberMotionPresenceMotionHold