MotionHeight

Tinggi yang mengikuti kontennya: menciut, meluas, dan perubahan konten.

WebReact NativeKonten dan ukuran

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Penggunaan terpendek

Details.jsx

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

Yang ditanganinya untuk Anda

Beranimasi ke tinggi konten yang sebenarnya, yang diukur untuk Anda.
Mengikuti konten saat ia bertambah atau berkurang selama terbuka.
Dimulai dari tinggi di layar, bahkan di tengah perubahan.
Mengubah ukuran halaman langsung menyesuaikan, bukan tertinggal di belakang lebar baru.
Konten yang tertutup tetap terpasang tetapi tersembunyi dan inert, jadi state-nya terjaga.

Gunakan untuk

Jawaban di FAQ.
Kelompok pengaturan yang terbuka.
Daftar yang tinggi totalnya perlu beranimasi (bungkus MotionList).

Props

Prop	Tipe	Bawaan	Deskripsi
`open`	`boolean`	`true`	`false` menciut ke tinggi nol; konten tetap terpasang tetapi tersembunyi dan inert.
`children`	`ReactNode`		Kontennya.
`as`	`element`	`'div'`	Elemen yang dirender.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.
`onMotionComplete`	`(open) => void`		Berjalan dengan `open` setelah tinggi berhenti.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

Di web, tinggi diputar dengan Web Animations API dan konten mempertahankan tata letak normalnya.

Di React Native, view memotong kontennya dan menganimasikan tinggi dengan driver JS, karena tinggi adalah tata letak.

Dipakai di contoh-contoh ini

Jawaban obrolanSaran yang terlipat, jawaban yang mengalir dengan tempo stabil, dan baris status yang bertukar.MotionStreamMotionListMotionSwapMotionHeight