MotionSwap

Konten yang bertukar dengan crossfade sementara ukurannya mengikuti.

WebReact NativeKonten dan ukuran

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Penggunaan terpendek

SaveButton.jsx

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

Yang ditanganinya untuk Anda

Elemen berubah ukuran dari ukurannya di layar ke ukuran alami konten baru, jadi tombol tidak pernah melompat.
Konten lama memudar di tempatnya sementara konten baru muncul; tidak ada yang tersusun ulang selama pertukaran.
Mengubah kembali di tengah pertukaran melanjutkan dari yang ada di layar, bukan menumpuk salinan.
Children berupa teks biasa adalah value-nya sendiri; berikan value untuk hal lain.

Gunakan untuk

Simpan, lalu Menyimpan…, lalu Tersimpan.
Kerangka yang berubah menjadi kartu profil.
Tombol putar yang berubah menjadi jeda.

Props

Prop	Tipe	Bawaan	Deskripsi
`value`	`unknown`		Identitas konten; nilai baru memicu pertukaran. Children berupa teks biasa adalah identitasnya sendiri.
`children`	`ReactNode`		Kontennya.
`as`	`element`	`'span'`	Elemen yang dirender.
`inline`	`boolean`	`as === 'span'`	`true` menyesuaikan ukuran dengan konten (label, ikon); `false` mengisi lebar induk dan menganimasikan tinggi.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Posisi konten selama ukuran berubah.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Cara konten masuk dan pergi: `up` naik, `down` turun, `scale` membesar.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.
`onMotionComplete`	`(value) => void`		Berjalan saat gerak berhenti.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

inline (bawaan saat dirender sebagai span) menganimasikan lebar dan tinggi; inline={false} mengisi lebar induk dan menganimasikan tinggi.

Di React Native, pertukaran inline mengukur konten baru dalam satu baris; gunakan inline={false} untuk konten yang membungkus.

Dipakai di contoh-contoh ini

Jawaban obrolanSaran yang terlipat, jawaban yang mengalir dengan tempo stabil, dan baris status yang bertukar.MotionStreamMotionListMotionSwapMotionHeight