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