MotionHeight

Höhe, die ihrem Inhalt folgt: Ein- und Ausklappen sowie Inhaltsänderungen.

WebReact NativeInhalt und Größe

Ausprobieren

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

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

Kürzeste Nutzung

Details.jsx

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

Was sie dir abnimmt

Animiert auf die echte Höhe des Inhalts, für dich gemessen.
Folgt dem Inhalt, wenn er im geöffneten Zustand wächst oder schrumpft.
Startet bei der Höhe auf dem Bildschirm, auch mitten in einer Änderung.
Beim Ändern der Seitengröße passt es sich sofort an, statt der neuen Breite hinterherzulaufen.
Geschlossener Inhalt bleibt gemountet, aber versteckt und inaktiv, sodass sein State erhalten bleibt.

Gut für

Antworten in einer FAQ.
Eine Gruppe von Einstellungen, die sich öffnet.
Eine Liste, deren Gesamthöhe animiert werden soll (umschließe MotionList).

props

Prop	Typ	Standard	Beschreibung
`open`	`boolean`	`true`	`false` klappt auf Höhe null ein; der Inhalt bleibt gemountet, aber versteckt und inaktiv.
`children`	`ReactNode`		Der Inhalt.
`as`	`element`	`'div'`	Das zu rendernde Element.
`transition`	`Transition`	`spring`	Eine Timing-Kurve `{ duration, easing }` oder eine Feder `{ tempo: 'spring', spring }`. Federn behalten bei Unterbrechung ihren Schwung.
`onMotionComplete`	`(open) => void`		Läuft mit `open`, sobald die Höhe zur Ruhe gekommen ist.

Weitere props gehen an das gerenderte Element, also funktionieren className, style und Event-Handler wie gewohnt.

Web und React Native

Im Web spielt die Web Animations API die Höhe ab, und der Inhalt behält sein normales Layout.

Unter React Native beschneidet die View ihren Inhalt und animiert die Höhe mit dem JS-Treiber, weil Höhe Layout ist.

Verwendet in diesen Beispielen

Chat-AntwortVorschläge, die sich einklappen, eine Antwort, die gleichmäßig hereinströmt, und eine Statuszeile, die wechselt.MotionStreamMotionListMotionSwapMotionHeight