MotionSwap

Conținut care trece prin fondu încrucișat în timp ce mărimea îl urmează.

WebReact NativeConținut și mărime

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Cea mai scurtă utilizare

SaveButton.jsx

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

Ce rezolvă în locul dumneavoastră

Elementul trece de la mărimea de pe ecran la mărimea naturală a noului conținut, așa că butoanele nu sar niciodată.
Conținutul vechi se estompează pe loc în timp ce apare cel nou; niciunul nu se reașază în timpul schimbării.
Revenirea în mijlocul unei schimbări continuă de la ce e pe ecran, în loc să adune copii.
Copiii cu text simplu sunt propriul value; pentru orice altceva transmiteți value.

Folosiți-o pentru

Salvează, apoi Se salvează…, apoi Salvat.
Un schelet care devine card de profil.
Un buton de redare care devine pauză.

Props

Prop	Tip	Implicit	Descriere
`value`	`unknown`		Identitatea conținutului; o valoare nouă declanșează schimbarea. Copiii cu text simplu sunt propria identitate.
`children`	`ReactNode`		Conținutul.
`as`	`element`	`'span'`	Elementul de randat.
`inline`	`boolean`	`as === 'span'`	`true` se dimensionează după conținut (etichete, pictograme); `false` umple lățimea părintelui și animă înălțimea.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Unde stă conținutul cât se schimbă mărimea.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Cum intră și iese conținutul: `up` urcă, `down` coboară, `scale` crește.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.
`onMotionComplete`	`(value) => void`		Rulează când mișcarea se așază.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

inline (implicit când se randează ca span) animă lățimea și înălțimea; inline={false} umple lățimea părintelui și animă înălțimea.

În React Native, schimbările inline măsoară noul conținut pe un singur rând; folosiți inline={false} pentru conținut care se încadrează pe mai multe rânduri.

Folosită în aceste exemple

Răspuns în chatSugestii care se pliază, un răspuns transmis într-un ritm constant și o linie de status care se schimbă.MotionStreamMotionListMotionSwapMotionHeight