MotionHeight

Høyde som følger innholdet: lukke, åpne og innholdsendringer.

WebReact NativeInnhold og størrelse

Prøv det

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

Korteste bruk

Details.jsx

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

Dette tar den seg av

Animerer til innholdets faktiske høyde, målt for deg.
Følger innholdet når det vokser eller krymper mens det er åpent.
Starter fra høyden på skjermen, selv midt i en endring.
Når siden endrer størrelse, tilpasses høyden med en gang i stedet for å henge etter den nye bredden.
Lukket innhold forblir montert, men skjult og inert, så state-en beholdes.

Bruk den til

Svar i en FAQ.
En gruppe innstillinger som åpnes.
En liste der totalhøyden skal animeres (pakk inn MotionList).

Props

Prop	Type	Standard	Beskrivelse
`open`	`boolean`	`true`	`false` lukker til null høyde; innholdet forblir montert, men skjult og inert.
`children`	`ReactNode`		Innholdet.
`as`	`element`	`'div'`	Elementet som renderes.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.
`onMotionComplete`	`(open) => void`		Kjører med `open` når høyden har landet.

Andre props går til det renderte elementet, så className, style og hendelseshåndterere fungerer som vanlig.

Web og React Native

På nettet spilles høyden av Web Animations API, og innholdet beholder vanlig layout.

I React Native klipper visningen innholdet og animerer høyden på JS-driver, fordi høyde er layout.

Brukt i disse eksemplene

ChattesvarForslag som lukkes, et svar som strømmer i jevnt tempo, og en statuslinje som byttes.MotionStreamMotionListMotionSwapMotionHeight