MotionHeight

Höjd som följer innehållet: fälla ihop, fälla ut och innehållsändringar.

WebbReact NativeInnehåll och storlek

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kortaste användning

Details.jsx

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

Det här sköter den åt dig

Animerar till innehållets verkliga höjd, uppmätt åt dig.
Följer innehållet när det växer eller krymper medan det är öppet.
Börjar från höjden på skärmen, även mitt i en ändring.
Att ändra sidans storlek anpassar sig direkt i stället för att släpa efter den nya bredden.
Stängt innehåll förblir monterat men dolt och inert, så dess state behålls.

Använd den för

Svar i en FAQ.
En grupp inställningar som öppnas.
En lista vars totala höjd ska animeras (svep in MotionList).

Props

Prop	Typ	Standard	Beskrivning
`open`	`boolean`	`true`	`false` fäller ihop till höjden noll; innehållet förblir monterat men dolt och inert.
`children`	`ReactNode`		Innehållet.
`as`	`element`	`'div'`	Elementet som renderas.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.
`onMotionComplete`	`(open) => void`		Körs med `open` när höjden har landat.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

På webben spelas höjden upp av Web Animations API och innehållet behåller sin vanliga layout.

I React Native klipper vyn sitt innehåll och animerar höjden på JS-driver, eftersom höjd är layout.

Används i de här exemplen

ChattsvarFörslag som fälls ihop, ett svar som strömmar i jämn takt och en statusrad som byts.MotionStreamMotionListMotionSwapMotionHeight