MotionHeight

Chiều cao bám theo nội dung: thu gọn, mở rộng và thay đổi nội dung.

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 { useState } from 'react';
import { MotionHeight, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const questions = [
  {
    question: 'Do I need a provider?',
    answer: 'No. Every component works on its own. Import it, pass your data, and it animates.',
  },
  {
    question: 'What happens if I click twice quickly?',
    answer:
      'The height continues from what is on screen. A second click in the middle of a change turns it around ' +
      'smoothly instead of jumping to the start.',
  },
  {
    question: 'Does the content stay in the page?',
    answer:
      'Yes. Closed content stays mounted but hidden and inert, so its state is kept and it cannot take focus.',
  },
];

export default function App({ spring = 'default', single = true }) {
  const [open, setOpen] = useState([0]);

  const toggle = (index) => {
    if (open.includes(index)) setOpen(open.filter((item) => item !== index));
    else setOpen(single ? [index] : [...open, index]);
  };

  return (
    <div className="faq">
      {questions.map((item, index) => (
        <section key={item.question} className="entry">
          <button className="question" onClick={() => toggle(index)}>
            {item.question}
            <span className="sign">{open.includes(index) ? '−' : '+'}</span>
          </button>
          <MotionHeight open={open.includes(index)} transition={motionTokens.spring[spring]}>
            <p className="answer">{item.answer}</p>
          </MotionHeight>
        </section>
      ))}
    </div>
  );
}

styles.css

.faq {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px;
}

.entry {
  border: 1px solid #cfe8dc;
  border-radius: 14px;
  background: #fff;
}

.question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  background: none;
  font:
    650 16px system-ui,
    sans-serif;
  color: #0e2e24;
  text-align: start;
  cursor: pointer;
}

.sign {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eaf6f0;
  color: #176b52;
}

.answer {
  margin: 0;
  padding: 0 18px 18px;
  color: #5b616b;
  line-height: 1.6;
}

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

Details.jsx

<button onClick={() => setOpen(!open)}>Details</button>
<MotionHeight open={open}>
  <Answer />
</MotionHeight>

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

Tạo hoạt ảnh tới chiều cao thật của nội dung, được đo giúp bạn.
Bám theo nội dung khi nó tăng hay giảm trong lúc mở.
Bắt đầu từ chiều cao trên màn hình, kể cả giữa lúc thay đổi.
Đổi kích thước trang sẽ khớp ngay thay vì tụt lại sau chiều rộng mới.
Nội dung đóng vẫn được gắn nhưng bị ẩn và vô hiệu, nên state của nó được giữ.

Dùng cho

Câu trả lời trong FAQ.
Một nhóm cài đặt mở ra.
Danh sách cần tạo hoạt ảnh cho tổng chiều cao (bọc MotionList).

Props

Prop	Kiểu	Mặc định	Mô tả
`open`	`boolean`	`true`	`false` thu về chiều cao bằng không; nội dung vẫn được gắn nhưng bị ẩn và vô hiệu.
`children`	`ReactNode`		Nội dung.
`as`	`element`	`'div'`	Phần tử được render.
`transition`	`Transition`	`spring`	Đường cong timing `{ duration, easing }` hoặc lò xo `{ tempo: 'spring', spring }`. Lò xo giữ đà khi bị ngắt.
`onMotionComplete`	`(open) => void`		Chạy với `open` khi chiều cao đã dừng.

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

Trên web, chiều cao được phát bằng Web Animations API và nội dung giữ bố cục bình thường.

Trên React Native, view cắt nội dung và tạo hoạt ảnh chiều cao bằng JS driver, vì chiều cao là bố cục.

Đượ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