MotionSwap

Vsebina, ki se prelije, medtem ko ji velikost sledi.

SpletReact NativeVsebina in velikost

Preizkusite

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Najkrajša uporaba

SaveButton.jsx

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

Kaj uredi namesto vas

Element spremeni velikost od tiste na zaslonu do naravne velikosti nove vsebine, zato gumbi nikoli ne poskočijo.
Stara vsebina zbledi tam, kjer je bila, nova pa se prikaže; nobena se med zamenjavo ne prerazporedi.
Vrnitev sredi zamenjave nadaljuje od tistega, kar je na zaslonu, namesto da bi kopičila kopije.
Otroci z navadnim besedilom so sami svoj value; za vse drugo podajte value.

Uporabite jo za

Shrani, nato Shranjevanje …, nato Shranjeno.
Okostje, ki postane kartica profila.
Gumb za predvajanje, ki postane premor.

Props

Prop	Tip	Privzeto	Opis
`value`	`unknown`		Identiteta vsebine; nova vrednost sproži zamenjavo. Otroci z navadnim besedilom so sami svoja identiteta.
`children`	`ReactNode`		Vsebina.
`as`	`element`	`'span'`	Element za upodobitev.
`inline`	`boolean`	`as === 'span'`	`true` prilagodi velikost vsebini (oznake, ikone); `false` zapolni širino starša in animira višino.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Kje je vsebina med spreminjanjem velikosti.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Kako vsebina vstopi in odide: `up` se dvigne, `down` pade, `scale` zraste.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.
`onMotionComplete`	`(value) => void`		Se izvede, ko se gibanje umiri.

Druge props gredo upodobljenemu elementu, zato className, style in obravnave dogodkov delujejo kot običajno.

Splet in React Native

inline (privzeto, ko se upodobi kot span) animira širino in višino; inline={false} zapolni širino starša in animira višino.

V React Nativu vrstične zamenjave izmerijo novo vsebino v eni vrstici; za vsebino, ki se prelamlja, uporabite inline={false}.

Uporabljeno v teh primerih

Odgovor v klepetuPredlogi, ki se strnejo, odgovor, ki priteka v enakomernem tempu, in vrstica stanja, ki se zamenja.MotionStreamMotionListMotionSwapMotionHeight