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>

ما يتولّاه عنك

يتحرك إلى الارتفاع الحقيقي للمحتوى، مقيسًا نيابة عنك.
يتبع المحتوى حين يكبر أو يصغر وهو مفتوح.
يبدأ من الارتفاع على الشاشة، حتى في منتصف التغيير.
تغيير حجم الصفحة يُطبَّق فورًا بدل أن يتأخر عن العرض الجديد.
يبقى المحتوى المغلق مركّبًا لكنه مخفي وخامل، فتُحفظ حالته.

استخدمه لـ

إجابات في FAQ.
مجموعة إعدادات تنفتح.
قائمة يجب أن يتحرك ارتفاعها الكلي (غلّف MotionList).

Props

Prop	النوع	الافتراضي	الوصف
`open`	`boolean`	`true`	يطوي `false` إلى ارتفاع صفري؛ ويبقى المحتوى مركّبًا لكنه مخفي وخامل.
`children`	`ReactNode`		المحتوى.
`as`	`element`	`'div'`	العنصر المراد عرضه.
`transition`	`Transition`	`spring`	منحنى توقيت `{ duration, easing }` أو نابض `{ tempo: 'spring', spring }`. تحتفظ النوابض بزخمها عند المقاطعة.
`onMotionComplete`	`(open) => void`		يعمل مع `open` بعد استقرار الارتفاع.

تذهب props الأخرى إلى العنصر المعروض، فتعمل className وstyle ومعالجات الأحداث كالمعتاد.

الويب وReact Native

على الويب يُشغَّل الارتفاع عبر Web Animations API ويحافظ المحتوى على تخطيطه العادي.

في React Native يقصّ العرض محتواه ويحرّك الارتفاع على مشغّل JS، لأن الارتفاع تخطيط.

مستخدم في هذه الأمثلة

إجابة المحادثةاقتراحات تنطوي، وإجابة تتدفق بإيقاع ثابت، وسطر حالة يتبدّل.MotionStreamMotionListMotionSwapMotionHeight