MotionSwap

Inhalt, der überblendet, während seine Größe mitgeht.

WebReact NativeInhalt und Größe

Ausprobieren

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

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

Kürzeste Nutzung

SaveButton.jsx

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

Was sie dir abnimmt

Das Element ändert seine Größe von der Größe auf dem Bildschirm zur natürlichen Größe des neuen Inhalts, sodass Buttons nie springen.
Der alte Inhalt blendet dort aus, wo er war, während der neue einblendet; keiner von beiden fließt während des Wechsels neu um.
Mitten im Wechsel zurückzuwechseln setzt bei dem an, was auf dem Bildschirm ist, statt Kopien zu stapeln.
Reine Text-Kinder sind ihr eigener value; für alles andere übergibst du value.

Gut für

Speichern, dann Speichert…, dann Gespeichert.
Ein Skeleton, das zur Profilkarte wird.
Ein Play-Button, der zu Pause wird.

props

Prop	Typ	Standard	Beschreibung
`value`	`unknown`		Identität des Inhalts; ein neuer Wert löst den Wechsel aus. Reine Text-Kinder sind ihre eigene Identität.
`children`	`ReactNode`		Der Inhalt.
`as`	`element`	`'span'`	Das zu rendernde Element.
`inline`	`boolean`	`as === 'span'`	`true` passt die Größe an den Inhalt an (Labels, Icons); `false` füllt die Breite des Elternelements und animiert die Höhe.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Wo der Inhalt sitzt, während sich die Größe ändert.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Wie Inhalt kommt und geht: `up` steigt, `down` fällt, `scale` wächst.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.
`onMotionComplete`	`(value) => void`		Läuft, wenn die Bewegung zur Ruhe kommt.

Weitere props gehen an das gerenderte Element, also funktionieren className, style und Event-Handler wie gewohnt.

Web und React Native

inline (Standard beim Rendern als span) animiert Breite und Höhe; inline={false} füllt die Breite des Elternelements und animiert die Höhe.

Unter React Native messen Inline-Wechsel den neuen Inhalt auf einer Zeile; nutze inline={false} für Inhalt, der umbricht.

Verwendet in diesen Beispielen

Chat-AntwortVorschläge, die sich einklappen, eine Antwort, die gleichmäßig hereinströmt, und eine Statuszeile, die wechselt.MotionStreamMotionListMotionSwapMotionHeight