MotionSwap

Innehåll som övertonas medan storleken följer med.

WebbReact NativeInnehåll och storlek

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kortaste användning

SaveButton.jsx

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

Det här sköter den åt dig

Elementet ändrar storlek från sin storlek på skärmen till det nya innehållets naturliga storlek, så knappar hoppar aldrig.
Det gamla innehållet tonar ut där det var medan det nya tonar in; inget av dem flödar om under bytet.
Att byta tillbaka mitt i ett byte fortsätter från det som syns på skärmen i stället för att stapla kopior.
Barn som bara är text är sitt eget value; skicka value för allt annat.

Använd den för

Spara, sedan Sparar…, sedan Sparat.
Ett skelett som blir ett profilkort.
En spelaknapp som blir paus.

Props

Prop	Typ	Standard	Beskrivning
`value`	`unknown`		Innehållets identitet; ett nytt värde byter. Barn som bara är text är sin egen identitet.
`children`	`ReactNode`		Innehållet.
`as`	`element`	`'span'`	Elementet som renderas.
`inline`	`boolean`	`as === 'span'`	`true` anpassar storleken efter innehållet (etiketter, ikoner); `false` fyller förälderns bredd och animerar höjden.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Var innehållet sitter medan storleken ändras.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Hur innehåll kommer in och lämnar: `up` stiger, `down` faller, `scale` växer.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.
`onMotionComplete`	`(value) => void`		Körs när rörelsen landar.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

inline (standard när den renderas som span) animerar bredd och höjd; inline={false} fyller förälderns bredd och animerar höjden.

I React Native mäter inline-byten det nya innehållet på en rad; använd inline={false} för innehåll som radbryts.

Används i de här exemplen

ChattsvarFörslag som fälls ihop, ett svar som strömmar i jämn takt och en statusrad som byts.MotionStreamMotionListMotionSwapMotionHeight