MotionPresence

Ohrani vsebino priklopljeno, medtem ko se animira noter in ven.

SpletReact NativeVsebina in velikost

Preizkusite

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Najkrajša uporaba

Notice.jsx

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

Kaj uredi namesto vas

Namesto odklopa spremenite present; vsebina odide, preden se odstrani.
Obnovitev med izhodom nadaljuje od trenutnih vrednosti.
Vsebina, ki se znova pojavi, vstopi iz poze exit.
Prvo upodabljanje jo pokaže v mirovanju, zato vsebina, ki je že tam, ne utripne.

Uporabite jo za

Obvestilo o shranjenem osnutku.
Sporočilo o kuponu na blagajni.
Sporočilo o napaki pod poljem.

Props

Prop	Tip	Privzeto	Opis
`present`	`boolean`	`—`obvezno	Pokaže ali skrije vsebino. Spremenite to namesto odklopa.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Poza v mirovanju.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Poza, s katero vsebina odide in iz katere vstopi.
`as`	`element`	`'div'`	Element za upodobitev.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.
`onExitComplete`	`() => void`		Se izvede, ko je vsebina odšla in je bila odstranjena.

Druge props gredo upodobljenemu elementu, zato className, style in obravnave dogodkov delujejo kot običajno.

Splet in React Native

Poze uporabljajo opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width in height. onExitComplete se izvede, ko vsebina odide.

Iste poze in props delujejo v React Nativu.

Uporabljeno v teh primerih

Povzetek blagajneKoličine, zneski vrstic in skupni znesek se vrtijo, ko se košarica spreminja; obvestilo o kuponu vstopi in odide; plačilo zahteva premišljeno držanje.MotionListMotionNumberMotionPresenceMotionHold