MotionHeight

Višina, ki sledi vsebini: strnitev, razširitev in spremembe vsebine.

SpletReact NativeVsebina in velikost

Preizkusite

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

Najkrajša uporaba

Details.jsx

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

Kaj uredi namesto vas

Animira do prave višine vsebine, ki jo izmeri namesto vas.
Sledi vsebini, ko med odprtostjo raste ali se krči.
Začne pri višini na zaslonu, tudi sredi spremembe.
Sprememba velikosti strani se zaskoči, namesto da bi zaostajala za novo širino.
Zaprta vsebina ostane priklopljena, a skrita in inertna, zato se njeno stanje ohrani.

Uporabite jo za

Odgovori v FAQ.
Skupina nastavitev, ki se odpre.
Seznam, katerega skupna višina naj se animira (ovijte MotionList).

Props

Prop	Tip	Privzeto	Opis
`open`	`boolean`	`true`	`false` strne na ničelno višino; vsebina ostane priklopljena, a skrita in inertna.
`children`	`ReactNode`		Vsebina.
`as`	`element`	`'div'`	Element za upodobitev.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ali vzmet `{ tempo: 'spring', spring }`. Vzmeti ob prekinitvi ohranijo zagon.
`onMotionComplete`	`(open) => void`		Se izvede z `open`, ko se višina umiri.

Druge props gredo upodobljenemu elementu, zato className, style in obravnave dogodkov delujejo kot običajno.

Splet in React Native

Na spletu se višina predvaja z Web Animations API, vsebina pa ohrani običajno postavitev.

V React Nativu pogled obreže vsebino in višino animira z driverjem JS, ker je višina postavitev.

Uporabljeno v teh primerih

Odgovor v klepetuPredlogi, ki se strnejo, odgovor, ki priteka v enakomernem tempu, in vrstica stanja, ki se zamenja.MotionStreamMotionListMotionSwapMotionHeight