MotionHeight

ความสูงที่ตามเนื้อหา: ยุบ ขยาย และเนื้อหาที่เปลี่ยน

เว็บReact Nativeเนื้อหาและขนาด

ลองดู

กำลังเตรียมตัวอย่าง…

JavaScript ถูกปิดอยู่ โค้ดด้านล่างคือตัวอย่างฉบับสมบูรณ์

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

การใช้งานที่สั้นที่สุด

Details.jsx

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

สิ่งที่มันจัดการให้คุณ

เคลื่อนไหวไปยังความสูงจริงของเนื้อหา ซึ่งวัดให้คุณ
ตามเนื้อหาเมื่อมันโตขึ้นหรือหดลงขณะเปิดอยู่
เริ่มจากความสูงบนหน้าจอ แม้อยู่กลางการเปลี่ยนแปลง
การปรับขนาดหน้าจะเข้าที่ทันทีแทนที่จะตามหลังความกว้างใหม่
เนื้อหาที่ปิดอยู่ยังถูก mount แต่ถูกซ่อนและไม่ตอบสนอง state ของมันจึงถูกรักษาไว้

ใช้สำหรับ

คำตอบใน FAQ
กลุ่มการตั้งค่าที่เปิดออก
รายการที่ต้องการให้ความสูงรวมเคลื่อนไหว (ห่อ MotionList)

Props

Prop	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`open`	`boolean`	`true`	`false` ยุบเป็นความสูงศูนย์ เนื้อหายังถูก mount แต่ถูกซ่อนและไม่ตอบสนอง
`children`	`ReactNode`		เนื้อหา
`as`	`element`	`'div'`	องค์ประกอบที่จะเรนเดอร์
`transition`	`Transition`	`spring`	เส้นโค้ง timing `{ duration, easing }` หรือสปริง `{ tempo: 'spring', spring }` สปริงรักษาโมเมนตัมไว้เมื่อถูกขัดจังหวะ
`onMotionComplete`	`(open) => void`		ทำงานพร้อม `open` เมื่อความสูงหยุดนิ่ง

props อื่นจะส่งต่อไปยังองค์ประกอบที่เรนเดอร์ className, style และตัวจัดการเหตุการณ์จึงทำงานตามปกติ

เว็บและ React Native

บนเว็บ ความสูงเล่นด้วย Web Animations API และเนื้อหายังคงเลย์เอาต์ปกติ

บน React Native วิวจะตัดเนื้อหาและเคลื่อนไหวความสูงด้วย JS driver เพราะความสูงเป็นเลย์เอาต์

ใช้ในตัวอย่างเหล่านี้

คำตอบในแชตคำแนะนำที่พับเก็บ คำตอบที่สตรีมเข้ามาด้วยจังหวะคงที่ และบรรทัดสถานะที่สลับMotionStreamMotionListMotionSwapMotionHeight