MotionPresence

Pitää sisällön kiinnitettynä, kun se animoituu sisään ja ulos.

WebReact NativeSisältö ja koko

Kokeile

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Lyhin käyttö

Notice.jsx

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

Mitä se hoitaa puolestasi

Muuta present-arvoa irrottamisen sijaan; sisältö poistuu ennen kuin se poistetaan.
Palauttaminen poistumisen aikana jatkaa nykyisistä arvoista.
Uudelleen ilmestyvä sisältö saapuu exit-asennosta.
Ensimmäinen renderöinti näyttää sen levossa, joten jo paikalla oleva sisältö ei välähdä.

Käytä sitä

Ilmoitus tallennetusta luonnoksesta.
Kuponkiviesti kassalla.
Virheviesti kentän alla.

Props

Prop	Tyyppi	Oletus	Kuvaus
`present`	`boolean`	`—`pakollinen	Näyttää tai piilottaa sisällön. Muuta tätä irrottamisen sijaan.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Asento levossa.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Asento, jolla sisältö poistuu ja josta se saapuu.
`as`	`element`	`'div'`	Renderöitävä elementti.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.
`onExitComplete`	`() => void`		Suoritetaan, kun sisältö on poistunut ja se on poistettu.

Muut props-arvot menevät renderöidylle elementille, joten className, style ja tapahtumankäsittelijät toimivat tavalliseen tapaan.

Web ja React Native

Asennot käyttävät ominaisuuksia opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width ja height. onExitComplete suoritetaan, kun sisältö on poistunut.

Samat asennot ja props-arvot toimivat React Nativessa.

Käytetty näissä esimerkeissä

Kassan yhteenvetoMäärät, rivisummat ja kokonaissumma pyörivät ostoskorin muuttuessa; kuponki-ilmoitus saapuu ja poistuu; maksaminen vaatii harkitun pitkän painalluksen.MotionListMotionNumberMotionPresenceMotionHold