MotionSwap

Indhold, der krydstoner, mens størrelsen følger med.

WebReact NativeIndhold og størrelse

Prøv det

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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 brug

SaveButton.jsx

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

Det klarer den for dig

Elementet ændrer størrelse fra sin størrelse på skærmen til det nye indholds naturlige størrelse, så knapper aldrig hopper.
Det gamle indhold toner ud, hvor det var, mens det nye toner ind; ingen af dem flyder om under skiftet.
At skifte tilbage midt i et skift fortsætter fra det, der er på skærmen, i stedet for at stable kopier.
Børn, der kun er tekst, er deres egen value; giv value for alt andet.

Brug den til

Gem, derefter Gemmer…, derefter Gemt.
Et skelet, der bliver til et profilkort.
En afspilknap, der bliver til pause.

Props

Prop	Type	Standard	Beskrivelse
`value`	`unknown`		Indholdets identitet; en ny værdi skifter. Børn, der kun er tekst, er deres egen identitet.
`children`	`ReactNode`		Indholdet.
`as`	`element`	`'span'`	Elementet, der renderes.
`inline`	`boolean`	`as === 'span'`	`true` tilpasser størrelsen til indholdet (etiketter, ikoner); `false` fylder forælderens bredde og animerer højden.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Hvor indholdet sidder, mens størrelsen ændrer sig.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Hvordan indhold kommer ind og forlader: `up` stiger, `down` falder, `scale` vokser.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.
`onMotionComplete`	`(value) => void`		Kører, når bevægelsen lander.

Andre props går til det renderede element, så className, style og event handlers virker som normalt.

Web og React Native

inline (standard, når den renderes som span) animerer bredde og højde; inline={false} fylder forælderens bredde og animerer højden.

I React Native måler inline-skift det nye indhold på én linje; brug inline={false} til indhold, der ombrydes.

Brugt i disse eksempler

ChatsvarForslag, der foldes sammen, et svar, der streamer i et jævnt tempo, og en statuslinje, der skifter.MotionStreamMotionListMotionSwapMotionHeight