MotionPresence

Holder innhold montert mens det animeres inn og ut.

WebReact NativeInnhold og størrelse

Prøv det

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

Korteste bruk

Notice.jsx

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

Dette tar den seg av

Endre present i stedet for å avmontere; innholdet forlater før det fjernes.
Å gjenopprette under en utgang fortsetter fra gjeldende verdier.
Innhold som dukker opp igjen, kommer inn fra exit-posen.
Første rendering viser det i ro, så innhold som allerede er der, ikke blinker.

Bruk den til

Et varsel om at et utkast er lagret.
En melding om rabattkode i kassen.
En feilmelding under et felt.

Props

Prop	Type	Standard	Beskrivelse
`present`	`boolean`	`—`påkrevd	Vis eller skjul innholdet. Endre dette i stedet for å avmontere.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Posen i ro.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Posen innholdet forlater med og kommer inn fra.
`as`	`element`	`'div'`	Elementet som renderes.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.
`onExitComplete`	`() => void`		Kjører etter at innholdet har forlatt og er fjernet.

Andre props går til det renderte elementet, så className, style og hendelseshåndterere fungerer som vanlig.

Web og React Native

Poser bruker opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width og height. onExitComplete kjører etter at innholdet har forlatt.

De samme posene og props fungerer i React Native.

Brukt i disse eksemplene

KassesammendragAntall, linjesummer og totalen ruller når handlekurven endres; rabattmeldingen kommer og går; betaling krever et bevisst trykk og hold.MotionListMotionNumberMotionPresenceMotionHold