MotionSwap

Turinys, kuris persilieja, kol dydis seka.

ŽiniatinklisReact NativeTurinys ir dydis

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Trumpiausias naudojimas

SaveButton.jsx

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

Ką jis sutvarko už jus

Elementas keičia dydį nuo dydžio ekrane iki natūralaus naujo turinio dydžio, todėl mygtukai niekada nepašoka.
Senas turinys išblunka vietoje, kol naujas išryškėja; nė vienas keitimo metu neperdėliojamas.
Grįžimas keitimo viduryje tęsiasi nuo to, kas yra ekrane, užuot kaupęs kopijas.
Paprasto teksto vaikai patys yra savo value; visam kitam perduokite value.

Naudokite jį

Išsaugoti, tada Saugoma…, tada Išsaugota.
Griaučiai, kurie tampa profilio kortele.
Grojimo mygtukas, kuris tampa pauze.

Props

Prop	Tipas	Numatytoji	Aprašymas
`value`	`unknown`		Turinio tapatybė; nauja reikšmė sukelia pakeitimą. Paprasto teksto vaikai patys yra savo tapatybė.
`children`	`ReactNode`		Turinys.
`as`	`element`	`'span'`	Atvaizduojamas elementas.
`inline`	`boolean`	`as === 'span'`	`true` pritaiko dydį turiniui (etiketės, piktogramos); `false` užpildo tėvinio elemento plotį ir animuoja aukštį.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Kur yra turinys, kol keičiasi dydis.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Kaip turinys įeina ir išeina: `up` kyla, `down` krenta, `scale` didėja.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.
`onMotionComplete`	`(value) => void`		Vykdomas, kai judesys nusistovi.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

inline (numatytasis, kai atvaizduojama kaip span) animuoja plotį ir aukštį; inline={false} užpildo tėvinio elemento plotį ir animuoja aukštį.

React Native eilutiniai keitimai išmatuoja naują turinį vienoje eilutėje; eilutes keliančiam turiniui naudokite inline={false}.

Naudojama šiuose pavyzdžiuose

Pokalbio atsakymasSusilankstantys pasiūlymai, pastoviu tempu srautu ateinantis atsakymas ir besikeičianti būsenos eilutė.MotionStreamMotionListMotionSwapMotionHeight