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