MotionPresence

Išlaiko turinį prijungtą, kol jis animuojamas į vidų ir į išorę.

ŽiniatinklisReact NativeTurinys ir dydis

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Trumpiausias naudojimas

Notice.jsx

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

Ką jis sutvarko už jus

Užuot atjungę, pakeiskite present; turinys išeina prieš pašalinamas.
Atkūrimas išėjimo metu tęsiasi nuo dabartinių reikšmių.
Vėl atsirandantis turinys įeina iš exit pozos.
Pirmasis atvaizdavimas parodo jį ramybės būsenoje, todėl jau esantis turinys nemirkčioja.

Naudokite jį

Pranešimas apie išsaugotą juodraštį.
Kupono pranešimas atsiskaitant.
Klaidos pranešimas po lauku.

Props

Prop	Tipas	Numatytoji	Aprašymas
`present`	`boolean`	`—`privaloma	Rodyti ar slėpti turinį. Keiskite tai, užuot atjungę.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Poza ramybės būsenoje.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Poza, su kuria turinys išeina ir iš kurios įeina.
`as`	`element`	`'div'`	Atvaizduojamas elementas.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.
`onExitComplete`	`() => void`		Vykdomas turiniui išėjus ir jį pašalinus.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

Pozos naudoja opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width ir height. onExitComplete vykdomas turiniui išėjus.

Tos pačios pozos ir props veikia React Native.

Naudojama šiuose pavyzdžiuose

Atsiskaitymo suvestinėKiekiai, eilučių sumos ir bendra suma sukasi keičiantis krepšeliui; kupono pranešimas įeina ir išeina; mokėjimui reikia sąmoningo palaikymo.MotionListMotionNumberMotionPresenceMotionHold