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`	עקומת timing `{ duration, easing }` או קפיץ `{ tempo: 'spring', spring }`. קפיצים שומרים על התנופה שלהם כשמפריעים להם.
`onMotionComplete`	`(open) => void`		רץ עם `open` ברגע שהגובה התייצב.

props אחרים עוברים לאלמנט המרונדר, כך ש־className, style ומטפלי אירועים עובדים כרגיל.

אינטרנט ו־React Native

באינטרנט הגובה מתנגן ב־Web Animations API והתוכן שומר על הפריסה הרגילה שלו.

ב־React Native ה־view חותך את התוכן ומנפיש גובה על ה־driver של JS, כי גובה הוא פריסה.

בשימוש בדוגמאות האלה

תשובה בצ׳אטהצעות שמתקפלות, תשובה שזורמת בקצב קבוע ושורת סטטוס שמתחלפת.MotionStreamMotionListMotionSwapMotionHeight