MotionSwap

Съдържание, което се прелива, докато размерът го следва.

УебReact NativeСъдържание и размер

Опитайте

Подготовка на примера…

JavaScript е изключен. Кодът по-долу е пълният пример.

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

Най-кратка употреба

SaveButton.jsx

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

С какво се справя вместо вас

Елементът сменя размера си от този на екрана до естествения размер на новото съдържание, така че бутоните никога не подскачат.
Старото съдържание избледнява на мястото си, докато новото се появява; нито едно не се пренарежда по време на смяната.
Връщане по средата на смяна продължава от това, което е на екрана, вместо да трупа копия.
Дъщерният текст сам е своя value; за всичко друго подайте value.

Подходящ за

„Запази“, после „Запазване…“, после „Запазено“.
Скелет, който става карта на профил.
Бутон за пускане, който става пауза.

Props

Prop	Тип	По подразбиране	Описание
`value`	`unknown`		Идентичност на съдържанието; нова стойност предизвиква смяна. Дъщерният текст сам е своя идентичност.
`children`	`ReactNode`		Съдържанието.
`as`	`element`	`'span'`	Елементът за рендериране.
`inline`	`boolean`	`as === 'span'`	`true` нагласява размера към съдържанието (етикети, икони); `false` запълва ширината на родителя и анимира височината.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Къде е съдържанието, докато размерът се променя.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Как съдържанието влиза и излиза: `up` се издига, `down` се спуска, `scale` расте.
`transition`	`Transition`	`spring`	Крива на timing `{ duration, easing }` или пружина `{ tempo: 'spring', spring }`. Пружините запазват инерцията си при прекъсване.
`onMotionComplete`	`(value) => void`		Изпълнява се, когато движението спре.

Другите props отиват към рендерирания елемент, така че className, style и обработчиците на събития работят както обикновено.

Уеб и React Native

inline (по подразбиране при рендер като span) анимира ширина и височина; inline={false} запълва ширината на родителя и анимира височината.

В React Native вградените смени измерват новото съдържание на един ред; за съдържание, което се пренася, използвайте inline={false}.

Използван в тези примери

Отговор в чатПредложения, които се свиват, отговор, който тече с равномерно темпо, и ред за статус, който се сменя.MotionStreamMotionListMotionSwapMotionHeight