MotionSwap

Innhold som krysstones mens størrelsen følger etter.

WebReact NativeInnhold og størrelse

Prøv det

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

Korteste bruk

SaveButton.jsx

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

Dette tar den seg av

Elementet endrer størrelse fra størrelsen på skjermen til den naturlige størrelsen på det nye innholdet, så knapper hopper aldri.
Det gamle innholdet toner ut der det var, mens det nye toner inn; ingen av dem flyter om under byttet.
Å bytte tilbake midt i et bytte fortsetter fra det som er på skjermen i stedet for å stable kopier.
Barn som bare er tekst, er sin egen value; send value for alt annet.

Bruk den til

Lagre, så Lagrer …, så Lagret.
Et skjelett som blir et profilkort.
En avspillingsknapp som blir pause.

Props

Prop	Type	Standard	Beskrivelse
`value`	`unknown`		Innholdets identitet; en ny verdi bytter. Barn som bare er tekst, er sin egen identitet.
`children`	`ReactNode`		Innholdet.
`as`	`element`	`'span'`	Elementet som renderes.
`inline`	`boolean`	`as === 'span'`	`true` tilpasser størrelsen til innholdet (etiketter, ikoner); `false` fyller forelderens bredde og animerer høyden.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Hvor innholdet sitter mens størrelsen endres.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Hvordan innhold kommer inn og forlater: `up` stiger, `down` faller, `scale` vokser.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.
`onMotionComplete`	`(value) => void`		Kjører når bevegelsen lander.

Andre props går til det renderte elementet, så className, style og hendelseshåndterere fungerer som vanlig.

Web og React Native

inline (standard når den renderes som span) animerer bredde og høyde; inline={false} fyller forelderens bredde og animerer høyden.

I React Native måler inline-bytter det nye innholdet på én linje; bruk inline={false} for innhold som brytes.

Brukt i disse eksemplene

ChattesvarForslag som lukkes, et svar som strømmer i jevnt tempo, og en statuslinje som byttes.MotionStreamMotionListMotionSwapMotionHeight