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 изрязва съдържанието и анимира височината на JS драйвера, защото височината е оформление.

Използван в тези примери

Отговор в чатПредложения, които се свиват, отговор, който тече с равномерно темпо, и ред за статус, който се сменя.MotionStreamMotionListMotionSwapMotionHeight