MotionSwap

ऐसी सामग्री जो क्रॉस-फ़ेड होती है जबकि आकार उसका पीछा करता है।

वेबReact Nativeसामग्री और आकार

आज़माएँ

उदाहरण तैयार हो रहा है…

JavaScript बंद है। नीचे का कोड पूरा उदाहरण है।

App.jsx

import { useEffect, useState } from 'react';
import { MotionSwap, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

function Check() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16">
      <path d="m3 8.5 3 3 7-7" fill="none" stroke="currentColor" strokeWidth="2" />
    </svg>
  );
}

export default function App({ effect = 'up', align = 'center', spring = 'default' }) {
  const [status, setStatus] = useState('idle');
  const [loaded, setLoaded] = useState(true);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];

  useEffect(() => {
    if (status === 'idle') return;
    const next = status === 'saving' ? 'saved' : 'idle';
    const timer = setTimeout(() => setStatus(next), status === 'saving' ? 1100 : 1600);
    return () => clearTimeout(timer);
  }, [status]);

  useEffect(() => {
    if (loaded) return;
    const timer = setTimeout(() => setLoaded(true), 1200);
    return () => clearTimeout(timer);
  }, [loaded]);

  return (
    <div className="stage">
      <button className={`save ${status}`} onClick={() => setStatus('saving')}>
        <MotionSwap value={status} effect={effect} align={align} transition={transition}>
          {status === 'idle' && 'Save changes'}
          {status === 'saving' && 'Saving…'}
          {status === 'saved' && (
            <>
              <Check /> Saved
            </>
          )}
        </MotionSwap>
      </button>

      <MotionSwap
        as="div"
        inline={false}
        value={loaded ? 'profile' : 'loading'}
        effect={effect}
        transition={transition}
        className="profile"
      >
        {loaded ? (
          <div className="person">
            <span className="avatar">MK</span>
            <div>
              <strong>Min-ji Kim</strong>
              <p>Design engineer. Builds the motion system and the component docs.</p>
            </div>
          </div>
        ) : (
          <div className="skeleton">
            <span />
            <span />
          </div>
        )}
      </MotionSwap>
      <button className="reload" onClick={() => setLoaded(false)}>
        Reload profile
      </button>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 460px;
  margin: 0 auto;
  padding: 32px 20px;
}

.save {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    650 16px system-ui,
    sans-serif;
  cursor: pointer;
  transition: background-color 0.2s;
}

.save.saving {
  background: #2e8f6d;
}

.save.saved {
  background: #0e2e24;
}

.save svg {
  vertical-align: -2px;
}

.profile {
  width: 100%;
  border: 1px solid #cfe8dc;
  border-radius: 16px;
  background: #fff;
}

.person {
  display: flex;
  gap: 14px;
  padding: 18px;
}

.person p {
  margin: 4px 0 0;
  color: #5b616b;
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eaf6f0;
  color: #176b52;
  font-weight: 700;
}

.skeleton {
  display: grid;
  gap: 10px;
  padding: 22px 18px;
}

.skeleton span {
  height: 12px;
  border-radius: 6px;
  background: #eaf6f0;
}

.skeleton span:last-child {
  width: 60%;
}

.reload {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

सबसे छोटा इस्तेमाल

SaveButton.jsx

<button onClick={save}>
  <MotionSwap value={status} effect="up">
    {status === 'saving' ? 'Saving…' : status === 'saved' ? 'Saved' : 'Save'}
  </MotionSwap>
</button>;

यह आपके लिए क्या संभालता है

एलिमेंट स्क्रीन पर अपने आकार से नई सामग्री के स्वाभाविक आकार तक बदलता है, इसलिए बटन कभी नहीं कूदते।
पुरानी सामग्री अपनी जगह पर फीकी होती है जबकि नई उभरती है; स्वैप के दौरान कोई भी दोबारा नहीं बहती।
स्वैप के बीच वापस बदलने पर प्रतियाँ जमा करने के बजाय स्क्रीन पर दिख रही स्थिति से आगे बढ़ता है।
सादे टेक्स्ट वाले children अपना value ख़ुद हैं; बाक़ी सब के लिए value दें।

इसके लिए इस्तेमाल करें

सहेजें, फिर सहेजा जा रहा है…, फिर सहेजा गया।
स्केलेटन जो प्रोफ़ाइल कार्ड बन जाता है।
प्ले बटन जो पॉज़ बन जाता है।

Props

Prop	टाइप	डिफ़ॉल्ट	विवरण
`value`	`unknown`		सामग्री की पहचान; नया मान स्वैप करता है। सादे टेक्स्ट वाले children अपनी पहचान ख़ुद हैं।
`children`	`ReactNode`		सामग्री।
`as`	`element`	`'span'`	रेंडर होने वाला एलिमेंट।
`inline`	`boolean`	`as === 'span'`	`true` सामग्री के अनुसार आकार लेता है (लेबल, आइकन); `false` पैरेंट की चौड़ाई भरता है और ऊँचाई एनिमेट करता है।
`align`	`'start' \| 'center' \| 'end'`	`'center'`	आकार बदलते समय सामग्री कहाँ रहती है।
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	सामग्री कैसे आती और जाती है: `up` उठती है, `down` गिरती है, `scale` बढ़ती है।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।
`onMotionComplete`	`(value) => void`		गति ठहरने पर चलता है।

बाक़ी props रेंडर होने वाले एलिमेंट को जाते हैं, इसलिए className, style और इवेंट हैंडलर सामान्य रूप से काम करते हैं।

वेब और React Native

inline (span के रूप में रेंडर होने पर डिफ़ॉल्ट) चौड़ाई और ऊँचाई एनिमेट करता है; inline={false} पैरेंट की चौड़ाई भरता है और ऊँचाई एनिमेट करता है।

React Native में inline स्वैप नई सामग्री एक पंक्ति में मापते हैं; लपेटने वाली सामग्री के लिए inline={false} इस्तेमाल करें।

इन उदाहरणों में इस्तेमाल

चैट का जवाबसिमटने वाले सुझाव, स्थिर गति से स्ट्रीम होता जवाब और स्वैप होने वाली स्थिति पंक्ति।MotionStreamMotionListMotionSwapMotionHeight