MotionHeight

Výška, ktorá sleduje obsah: zbalenie, rozbalenie a zmeny obsahu.

WebReact NativeObsah a veľkosť

Vyskúšajte

Príprava príkladu…

JavaScript je vypnutý. Kód nižšie je celý príklad.

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

Najkratšie použitie

Details.jsx

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

Čo za vás vyrieši

Animuje na skutočnú výšku obsahu, nameranú za vás.
Sleduje obsah, keď v otvorenom stave rastie alebo sa zmenšuje.
Začína od výšky na obrazovke, aj uprostred zmeny.
Zmena veľkosti stránky sa prispôsobí hneď namiesto toho, aby za novou šírkou zaostávala.
Zatvorený obsah zostáva pripojený, ale skrytý a neaktívny, takže si zachová stav.

Použite na

Odpovede v FAQ.
Skupina nastavení, ktorá sa otvára.
Zoznam, ktorého celková výška sa má animovať (obaľte MotionList).

Props

Prop	Typ	Predvolené	Popis
`open`	`boolean`	`true`	`false` zbalí na nulovú výšku; obsah zostane pripojený, ale skrytý a neaktívny.
`children`	`ReactNode`		Obsah.
`as`	`element`	`'div'`	Prvok, ktorý sa renderuje.
`transition`	`Transition`	`spring`	Krivka timing `{ duration, easing }` alebo pružina `{ tempo: 'spring', spring }`. Pružiny si pri prerušení zachovávajú hybnosť.
`onMotionComplete`	`(open) => void`		Spustí sa s `open`, keď výška dosadne.

Ostatné props idú do renderovaného prvku, takže className, style a obsluhy udalostí fungujú ako obvykle.

Web a React Native

Na webe sa výška prehráva cez Web Animations API a obsah si zachováva bežné rozloženie.

V React Native view oreže obsah a animuje výšku na driveri JS, pretože výška je rozloženie.

Použité v týchto príkladoch

Odpoveď v chateNávrhy, ktoré sa zbalia, odpoveď streamovaná stálym tempom a stavový riadok, ktorý sa vymení.MotionStreamMotionListMotionSwapMotionHeight