MotionSwap

Sadržaj koji se prelijeva dok ga veličina prati.

WebReact NativeSadržaj i veličina

Isprobajte

Priprema primjera…

JavaScript je isključen. Kod ispod je cijeli primjer.

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

Najkraća upotreba

SaveButton.jsx

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

Što obavlja umjesto vas

Element mijenja veličinu od veličine na zaslonu do prirodne veličine novog sadržaja, pa gumbi nikad ne skaču.
Stari sadržaj blijedi na svom mjestu dok se novi pojavljuje; nijedan se ne preraspoređuje tijekom zamjene.
Vraćanje usred zamjene nastavlja od onoga što je na zaslonu umjesto da gomila kopije.
Djeca koja su samo tekst sama su svoj value; za sve ostalo predajte value.

Koristite je za

Spremi, zatim Spremanje…, zatim Spremljeno.
Kostur koji postaje kartica profila.
Gumb za reprodukciju koji postaje pauza.

Props

Prop	Tip	Zadano	Opis
`value`	`unknown`		Identitet sadržaja; nova vrijednost uzrokuje zamjenu. Djeca koja su samo tekst sama su svoj identitet.
`children`	`ReactNode`		Sadržaj.
`as`	`element`	`'span'`	Element koji se renderira.
`inline`	`boolean`	`as === 'span'`	`true` prilagođava veličinu sadržaju (oznake, ikone); `false` ispunjava širinu roditelja i animira visinu.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Gdje je sadržaj dok se veličina mijenja.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Kako sadržaj ulazi i izlazi: `up` se diže, `down` se spušta, `scale` raste.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.
`onMotionComplete`	`(value) => void`		Izvodi se kad se pokret smiri.

Ostali props idu renderiranom elementu, pa className, style i rukovatelji događaja rade kao i obično.

Web i React Native

inline (zadano pri renderiranju kao span) animira širinu i visinu; inline={false} ispunjava širinu roditelja i animira visinu.

U React Nativeu inline zamjene mjere novi sadržaj u jednom retku; za sadržaj koji se prelama koristite inline={false}.

Korišteno u ovim primjerima

Odgovor u chatuPrijedlozi koji se sklapaju, odgovor koji pristiže ujednačenim tempom i redak statusa koji se zamjenjuje.MotionStreamMotionListMotionSwapMotionHeight