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