MotionSwap

Inhoud die overvloeit terwijl de grootte meegaat.

WebReact NativeInhoud en grootte

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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

Kortste gebruik

SaveButton.jsx

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

Wat het voor je regelt

Het element verandert van zijn grootte op het scherm naar de natuurlijke grootte van de nieuwe inhoud, dus knoppen springen nooit.
De oude inhoud vervaagt waar hij stond terwijl de nieuwe infadet; geen van beide herschikt tijdens de wissel.
Midden in een wissel terugwisselen gaat verder vanaf wat op het scherm staat in plaats van kopieën te stapelen.
Kinderen met alleen tekst zijn hun eigen value; geef value mee voor al het andere.

Gebruik het voor

Opslaan, dan Opslaan…, dan Opgeslagen.
Een skelet dat een profielkaart wordt.
Een afspeelknop die pauze wordt.

Props

Prop	Type	Standaard	Beschrijving
`value`	`unknown`		Identiteit van de inhoud; een nieuwe waarde wisselt. Kinderen met alleen tekst zijn hun eigen identiteit.
`children`	`ReactNode`		De inhoud.
`as`	`element`	`'span'`	Het element dat wordt gerenderd.
`inline`	`boolean`	`as === 'span'`	`true` past de grootte aan de inhoud aan (labels, iconen); `false` vult de breedte van de ouder en animeert de hoogte.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Waar de inhoud staat terwijl de grootte verandert.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Hoe inhoud binnenkomt en vertrekt: `up` stijgt, `down` daalt, `scale` groeit.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.
`onMotionComplete`	`(value) => void`		Draait als de beweging tot rust komt.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

inline (standaard bij renderen als span) animeert breedte en hoogte; inline={false} vult de breedte van de ouder en animeert de hoogte.

In React Native meten inline-wissels de nieuwe inhoud op één regel; gebruik inline={false} voor inhoud die doorloopt.

Gebruikt in deze voorbeelden

ChatantwoordSuggesties die inklappen, een antwoord dat in een gelijkmatig tempo streamt en een statusregel die wisselt.MotionStreamMotionListMotionSwapMotionHeight