MotionHeight

Înălțime care urmează conținutul: restrângere, extindere și schimbări de conținut.

WebReact NativeConținut și mărime

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Cea mai scurtă utilizare

Details.jsx

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

Ce rezolvă în locul dumneavoastră

Animă până la înălțimea reală a conținutului, măsurată în locul dumneavoastră.
Urmează conținutul când crește sau scade cât e deschis.
Pornește de la înălțimea de pe ecran, chiar și în mijlocul unei schimbări.
Redimensionarea paginii se fixează imediat, în loc să rămână în urma noii lățimi.
Conținutul închis rămâne montat, dar ascuns și inert, așa că starea lui se păstrează.

Folosiți-o pentru

Răspunsuri dintr-un FAQ.
Un grup de setări care se deschide.
O listă a cărei înălțime totală ar trebui să se animeze (înfășurați MotionList).

Props

Prop	Tip	Implicit	Descriere
`open`	`boolean`	`true`	`false` restrânge la înălțime zero; conținutul rămâne montat, dar ascuns și inert.
`children`	`ReactNode`		Conținutul.
`as`	`element`	`'div'`	Elementul de randat.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.
`onMotionComplete`	`(open) => void`		Rulează cu `open` după ce înălțimea s-a așezat.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

Pe web înălțimea se redă pe Web Animations API, iar conținutul își păstrează layoutul normal.

În React Native vizualizarea își decupează conținutul și animă înălțimea pe driverul JS, pentru că înălțimea este layout.

Folosită în aceste exemple

Răspuns în chatSugestii care se pliază, un răspuns transmis într-un ritm constant și o linie de status care se schimbă.MotionStreamMotionListMotionSwapMotionHeight