MotionHeight

Hoogte die de inhoud volgt: inklappen, uitklappen en inhoudswijzigingen.

WebReact NativeInhoud en grootte

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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

Kortste gebruik

Details.jsx

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

Wat het voor je regelt

Animeert naar de echte hoogte van de inhoud, voor je gemeten.
Volgt de inhoud als die groeit of krimpt terwijl hij open is.
Begint bij de hoogte op het scherm, zelfs midden in een wijziging.
Het formaat van de pagina wijzigen klikt direct mee in plaats van achter de nieuwe breedte aan te lopen.
Dichte inhoud blijft gemount maar verborgen en inert, dus de state blijft behouden.

Gebruik het voor

Antwoorden in een FAQ.
Een groep instellingen die opengaat.
Een lijst waarvan de totale hoogte moet animeren (wikkel MotionList).

Props

Prop	Type	Standaard	Beschrijving
`open`	`boolean`	`true`	`false` klapt in tot hoogte nul; de inhoud blijft gemount maar verborgen en inert.
`children`	`ReactNode`		De inhoud.
`as`	`element`	`'div'`	Het element dat wordt gerenderd.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.
`onMotionComplete`	`(open) => void`		Draait met `open` zodra de hoogte tot rust is gekomen.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

Op het web speelt de hoogte af op de Web Animations API en houdt de inhoud zijn normale layout.

In React Native knipt de view zijn inhoud af en animeert de hoogte op de JS-driver, omdat hoogte layout is.

Gebruikt in deze voorbeelden

ChatantwoordSuggesties die inklappen, een antwoord dat in een gelijkmatig tempo streamt en een statusregel die wisselt.MotionStreamMotionListMotionSwapMotionHeight