MotionSwap

Nội dung chuyển mờ chéo trong khi kích thước bám theo.

WebReact NativeNội dung và kích thước

Thử ngay

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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

Cách dùng ngắn nhất

SaveButton.jsx

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

Những gì nó xử lý giúp bạn

Phần tử đổi kích thước từ kích thước trên màn hình sang kích thước tự nhiên của nội dung mới, nên nút không bao giờ nhảy.
Nội dung cũ mờ đi tại chỗ trong khi nội dung mới hiện ra; không cái nào bị dàn lại trong lúc hoán đổi.
Đổi ngược lại giữa lúc hoán đổi sẽ tiếp tục từ những gì đang trên màn hình thay vì chồng thêm bản sao.
Children là văn bản thường thì chính là value; với thứ khác hãy truyền value.

Dùng cho

Lưu, rồi Đang lưu…, rồi Đã lưu.
Khung xương trở thành thẻ hồ sơ.
Nút phát trở thành nút tạm dừng.

Props

Prop	Kiểu	Mặc định	Mô tả
`value`	`unknown`		Danh tính của nội dung; giá trị mới sẽ hoán đổi. Children là văn bản thường thì chính là danh tính.
`children`	`ReactNode`		Nội dung.
`as`	`element`	`'span'`	Phần tử được render.
`inline`	`boolean`	`as === 'span'`	`true` lấy kích thước theo nội dung (nhãn, biểu tượng); `false` lấp đầy chiều rộng phần tử cha và tạo hoạt ảnh cho chiều cao.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Vị trí của nội dung trong lúc kích thước thay đổi.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Cách nội dung vào và ra: `up` đi lên, `down` rơi xuống, `scale` lớn dần.
`transition`	`Transition`	`spring`	Đường cong timing `{ duration, easing }` hoặc lò xo `{ tempo: 'spring', spring }`. Lò xo giữ đà khi bị ngắt.
`onMotionComplete`	`(value) => void`		Chạy khi chuyển động dừng hẳn.

Các props khác được chuyển tới phần tử được render, nên className, style và trình xử lý sự kiện hoạt động như bình thường.

Web và React Native

inline (mặc định khi render dưới dạng span) tạo hoạt ảnh cho chiều rộng và chiều cao; inline={false} lấp đầy chiều rộng phần tử cha và tạo hoạt ảnh cho chiều cao.

Trên React Native, hoán đổi inline đo nội dung mới trên một dòng; hãy dùng inline={false} cho nội dung xuống dòng.

Được dùng trong các ví dụ này

Câu trả lời trong trò chuyệnGợi ý thu gọn lại, câu trả lời truyền dần với nhịp đều và dòng trạng thái hoán đổi.MotionStreamMotionListMotionSwapMotionHeight