MotionHeight

Højde, der følger indholdet: fold sammen, fold ud og indholdsændringer.

WebReact NativeIndhold og størrelse

Prøv det

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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 brug

Details.jsx

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

Det klarer den for dig

Animerer til indholdets reelle højde, målt for dig.
Følger indholdet, når det vokser eller skrumper, mens det er åbent.
Starter fra højden på skærmen, selv midt i en ændring.
Når siden ændrer størrelse, tilpasses højden med det samme i stedet for at halte efter den nye bredde.
Lukket indhold forbliver monteret, men skjult og inert, så dets state bevares.

Brug den til

Svar i en FAQ.
En gruppe indstillinger, der åbnes.
En liste, hvis samlede højde skal animeres (indpak MotionList).

Props

Prop	Type	Standard	Beskrivelse
`open`	`boolean`	`true`	`false` folder sammen til højden nul; indholdet forbliver monteret, men skjult og inert.
`children`	`ReactNode`		Indholdet.
`as`	`element`	`'div'`	Elementet, der renderes.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.
`onMotionComplete`	`(open) => void`		Kører med `open`, når højden er landet.

Andre props går til det renderede element, så className, style og event handlers virker som normalt.

Web og React Native

På nettet afspilles højden af Web Animations API, og indholdet beholder sit normale layout.

I React Native klipper viewet sit indhold og animerer højden på JS-driver, fordi højde er layout.

Brugt i disse eksempler

ChatsvarForslag, der foldes sammen, et svar, der streamer i et jævnt tempo, og en statuslinje, der skifter.MotionStreamMotionListMotionSwapMotionHeight