MotionPresence

Holder indhold monteret, mens det animeres ind og ud.

WebReact NativeIndhold og størrelse

Prøv det

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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 brug

Notice.jsx

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

Det klarer den for dig

Ændr present i stedet for at afmontere; indholdet forlader, før det fjernes.
At gendanne under en udgang fortsætter fra de aktuelle værdier.
Indhold, der dukker op igen, kommer ind fra exit-posen.
Den første rendering viser det i hvile, så indhold, der allerede er der, ikke blinker.

Brug den til

En besked om, at en kladde er gemt.
En rabatkodebesked i kassen.
En fejlbesked under et felt.

Props

Prop	Type	Standard	Beskrivelse
`present`	`boolean`	`—`påkrævet	Vis eller skjul indholdet. Ændr dette i stedet for at afmontere.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Posen i hvile.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Posen, som indholdet forlader med og kommer ind fra.
`as`	`element`	`'div'`	Elementet, der renderes.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.
`onExitComplete`	`() => void`		Kører, efter at indholdet er forladt og fjernet.

Andre props går til det renderede element, så className, style og event handlers virker som normalt.

Web og React Native

Poses bruger opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width og height. onExitComplete kører, når indholdet er forladt.

De samme poses og props virker i React Native.

Brugt i disse eksempler

KasseoversigtAntal, linjetotaler og totalen ruller, når kurven ændrer sig; rabatbeskeden kommer og går; at betale kræver et bevidst tryk og hold.MotionListMotionNumberMotionPresenceMotionHold