MotionSwap

Obsah, ktorý sa prelína, zatiaľ čo veľkosť ho nasleduje.

WebReact NativeObsah a veľkosť

Vyskúšajte

Príprava príkladu…

JavaScript je vypnutý. Kód nižšie je celý príklad.

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

Najkratšie použitie

SaveButton.jsx

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

Čo za vás vyrieši

Prvok mení veľkosť zo svojej veľkosti na obrazovke na prirodzenú veľkosť nového obsahu, takže tlačidlá nikdy neskáču.
Starý obsah mizne na svojom mieste, zatiaľ čo nový sa objavuje; ani jeden sa počas výmeny nepreskladá.
Návrat uprostred výmeny pokračuje od toho, čo je na obrazovke, namiesto toho, aby sa kópie vŕšili.
Potomkovia tvorení len textom sú sami svojou value; pre všetko ostatné odovzdajte value.

Použite na

Uložiť, potom Ukladá sa…, potom Uložené.
Kostra, ktorá sa zmení na kartu profilu.
Tlačidlo prehrať, ktoré sa zmení na pauzu.

Props

Prop	Typ	Predvolené	Popis
`value`	`unknown`		Identita obsahu; nová hodnota vyvolá výmenu. Potomkovia tvorení len textom sú sami svojou identitou.
`children`	`ReactNode`		Obsah.
`as`	`element`	`'span'`	Prvok, ktorý sa renderuje.
`inline`	`boolean`	`as === 'span'`	`true` prispôsobí veľkosť obsahu (popisky, ikony); `false` vyplní šírku rodiča a animuje výšku.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Kde obsah sedí, kým sa veľkosť mení.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Ako obsah prichádza a odchádza: `up` stúpa, `down` klesá, `scale` rastie.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.
`onMotionComplete`	`(value) => void`		Spustí sa, keď pohyb dosadne.

Ostatné props idú do renderovaného prvku, takže className, style a obsluhy udalostí fungujú ako obvykle.

Web a React Native

inline (predvolené pri renderi ako span) animuje šírku aj výšku; inline={false} vyplní šírku rodiča a animuje výšku.

V React Native merajú výmeny inline nový obsah na jednom riadku; pre obsah, ktorý sa zalamuje, použite inline={false}.

Použité v týchto príkladoch

Odpoveď v chateNávrhy, ktoré sa zbalia, odpoveď streamovaná stálym tempom a stavový riadok, ktorý sa vymení.MotionStreamMotionListMotionSwapMotionHeight