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

तुमच्यासाठी काय हाताळतो

एलिमेंट स्क्रीनवरील आकारापासून नवीन मजकुराच्या नैसर्गिक आकारापर्यंत बदलतो, त्यामुळे बटणे कधीही उडी घेत नाहीत.
जुना मजकूर जिथे होता तिथेच फिकट होतो आणि नवीन फिकटपणे येतो; अदलाबदलीदरम्यान कोणताही पुन्हा वाहत नाही.
अदलाबदलीच्या मध्येच परत बदलल्यास, प्रती न रचता स्क्रीनवर दिसणाऱ्यापासून पुढे जाते.
साधा मजकूर असलेली मुले स्वतःच value असतात; इतर कशासाठीही value द्या.

यासाठी वापरा

सेव्ह करा, मग सेव्ह होत आहे…, मग सेव्ह झाले.
प्रोफाइल कार्ड बनणारे skeleton.
थांबवा बनणारे प्ले बटण.

Props

Prop	प्रकार	डीफॉल्ट	वर्णन
`value`	`unknown`		मजकुराची ओळख; नवीन मूल्य बदलते. साधा मजकूर असलेली मुले स्वतःच ओळख असतात.
`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`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', spring }`. spring व्यत्यय आल्यावर त्यांची गती राखतात.
`onMotionComplete`	`(value) => void`		मोशन स्थिरावल्यावर चालते.

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

वेब आणि React Native

inline (span म्हणून रेंडर होताना डीफॉल्ट) रुंदी आणि उंची ॲनिमेट करते; inline={false} पालकाची रुंदी भरते आणि उंची ॲनिमेट करते.

React Native वर inline अदलाबदल नवीन मजकूर एका ओळीत मोजते; गुंडाळणाऱ्या मजकुरासाठी inline={false} वापरा.

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

चॅट उत्तरदुमडून लपणाऱ्या सूचना, स्थिर गतीने स्ट्रीम होणारे उत्तर आणि बदलणारी स्थिती ओळ.MotionStreamMotionListMotionSwapMotionHeight