MotionPresence

मजकूर आत येताना आणि बाहेर जाताना ॲनिमेट होत असताना तो माउंट ठेवतो.

वेबReact 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 बदला; मजकूर काढला जाण्यापूर्वी बाहेर पडतो.
बाहेर पडताना पुनर्संचयित केल्यास सध्याच्या मूल्यांपासून पुढे जाते.
पुन्हा दिसणारा मजकूर exit pose मधून प्रवेश करतो.
पहिला रेंडर त्याला विश्रांतीत दाखवतो, त्यामुळे आधीपासून असलेला मजकूर चमकत नाही.

यासाठी वापरा

सेव्ह झालेल्या मसुद्याची सूचना.
चेकआउटमधील कूपन संदेश.
फील्डखालील त्रुटी संदेश.

Props

Prop	प्रकार	डीफॉल्ट	वर्णन
`present`	`boolean`	`—`आवश्यक	मजकूर दाखवा किंवा लपवा. अनमाउंट करण्याऐवजी हे बदला.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	विश्रांतीतील pose.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	मजकूर ज्याने बाहेर पडतो आणि ज्यातून प्रवेश करतो तो pose.
`as`	`element`	`'div'`	रेंडर करायचा एलिमेंट.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', spring }`. spring व्यत्यय आल्यावर त्यांची गती राखतात.
`onExitComplete`	`() => void`		मजकूर बाहेर पडून काढल्यानंतर चालते.

इतर props रेंडर होणाऱ्या एलिमेंटकडे जातात, त्यामुळे className, style आणि इव्हेंट हँडलर नेहमीप्रमाणे चालतात.

वेब आणि React Native

Pose opacity, translateX, translateY, scale, scaleX, scaleY, rotate, width आणि height वापरतात. मजकूर बाहेर पडल्यानंतर onExitComplete चालते.

तेच pose आणि props React Native वर चालतात.

या उदाहरणांमध्ये वापरलेले

चेकआउट सारांशकार्ट बदलताना प्रमाण, ओळींच्या रकमा आणि एकूण घरंगळतात; कूपन सूचना येते आणि जाते; पैसे देण्यासाठी जाणीवपूर्वक धरावे लागते.MotionListMotionNumberMotionPresenceMotionHold