MotionPresence

Κρατά το περιεχόμενο προσαρτημένο όσο κινείται προς τα μέσα και προς τα έξω.

WebReact NativeΠεριεχόμενο και μέγεθος

Δοκιμάστε το

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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

Η πιο σύντομη χρήση

Notice.jsx

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

Τι αναλαμβάνει για εσάς

Αλλάξτε το present αντί να κάνετε αποπροσάρτηση· το περιεχόμενο φεύγει πριν αφαιρεθεί.
Η επαναφορά κατά την έξοδο συνεχίζει από τις τρέχουσες τιμές.
Το περιεχόμενο που εμφανίζεται ξανά μπαίνει από το pose exit.
Η πρώτη απόδοση το δείχνει σε ηρεμία, οπότε περιεχόμενο που υπάρχει ήδη δεν αναβοσβήνει.

Χρησιμοποιήστε το για

Ειδοποίηση αποθηκευμένου πρόχειρου.
Μήνυμα κουπονιού στην ολοκλήρωση αγοράς.
Μήνυμα σφάλματος κάτω από ένα πεδίο.

Props

Prop	Τύπος	Προεπιλογή	Περιγραφή
`present`	`boolean`	`—`υποχρεωτικό	Εμφάνιση ή απόκρυψη του περιεχομένου. Αλλάξτε αυτό αντί για αποπροσάρτηση.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Το pose σε ηρεμία.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Το pose με το οποίο φεύγει και από το οποίο μπαίνει το περιεχόμενο.
`as`	`element`	`'div'`	Το στοιχείο προς απόδοση.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.
`onExitComplete`	`() => void`		Εκτελείται αφού το περιεχόμενο φύγει και αφαιρεθεί.

Τα υπόλοιπα props πηγαίνουν στο στοιχείο που αποδίδεται, οπότε τα className, style και οι χειριστές συμβάντων λειτουργούν κανονικά.

Web και React Native

Τα poses χρησιμοποιούν opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width και height. Το onExitComplete εκτελείται αφού φύγει το περιεχόμενο.

Τα ίδια poses και props λειτουργούν στο React Native.

Χρησιμοποιείται σε αυτά τα παραδείγματα

Σύνοψη ολοκλήρωσης αγοράςΟι ποσότητες, τα σύνολα γραμμών και το συνολικό ποσό κυλούν καθώς αλλάζει το καλάθι· η ειδοποίηση κουπονιού μπαίνει και βγαίνει· η πληρωμή απαιτεί σκόπιμο παρατεταμένο πάτημα.MotionListMotionNumberMotionPresenceMotionHold