MotionSwap

Contenuto che passa in dissolvenza incrociata mentre la sua dimensione si adegua.

WebReact NativeContenuto e dimensione

Provalo

Preparazione dell’esempio…

JavaScript è disattivato. Il codice qui sotto è l’esempio completo.

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

L’uso più breve

SaveButton.jsx

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

Di che cosa si occupa al posto tuo

L’elemento si ridimensiona dalla sua dimensione sullo schermo alla dimensione naturale del nuovo contenuto, così i pulsanti non saltano mai.
Il vecchio contenuto svanisce dov’era mentre il nuovo compare; nessuno dei due si riposiziona durante lo scambio.
Tornare indietro a metà di uno scambio prosegue da ciò che è sullo schermo invece di accumulare copie.
I figli di solo testo sono il loro stesso value; per tutto il resto passa value.

Usalo per

Salva, poi Salvataggio…, poi Salvato.
Uno skeleton che diventa una scheda profilo.
Un pulsante play che diventa pausa.

Props

Prop	Tipo	Predefinito	Descrizione
`value`	`unknown`		Identità del contenuto; un nuovo valore lo scambia. I figli di solo testo sono la loro stessa identità.
`children`	`ReactNode`		Il contenuto.
`as`	`element`	`'span'`	L’elemento da renderizzare.
`inline`	`boolean`	`as === 'span'`	`true` si adatta al contenuto (etichette, icone); `false` riempie la larghezza del genitore e anima l’altezza.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Dove si trova il contenuto mentre la dimensione cambia.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Come entra ed esce il contenuto: `up` sale, `down` scende, `scale` cresce.
`transition`	`Transition`	`spring`	Una curva di timing `{ duration, easing }` o una molla `{ tempo: 'spring', spring }`. Le molle conservano lo slancio quando vengono interrotte.
`onMotionComplete`	`(value) => void`		Viene eseguito quando il movimento si assesta.

Le altre props vanno all’elemento renderizzato, quindi className, style e gli event handler funzionano come sempre.

Web e React Native

inline (il default quando è renderizzato come span) anima larghezza e altezza; inline={false} riempie la larghezza del genitore e anima l’altezza.

Su React Native gli scambi inline misurano il nuovo contenuto su una sola riga; usa inline={false} per contenuti che vanno a capo.

Usato in questi esempi

Risposta in chatSuggerimenti che si richiudono, una risposta che arriva in streaming a ritmo costante e una riga di stato che si scambia.MotionStreamMotionListMotionSwapMotionHeight