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`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: '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