MotionHeight

Aukštis, sekantis turinį: sutraukimas, išskleidimas ir turinio pokyčiai.

ŽiniatinklisReact NativeTurinys ir dydis

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Trumpiausias naudojimas

Details.jsx

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

Ką jis sutvarko už jus

Animuoja iki tikrojo turinio aukščio, kurį išmatuoja už jus.
Seka turinį, kai jis atidarytas auga ar mažėja.
Prasideda nuo aukščio ekrane, net pakeitimo viduryje.
Keičiant puslapio dydį iškart prisitaiko, užuot atsilikęs nuo naujo pločio.
Uždarytas turinys lieka prijungtas, bet paslėptas ir neaktyvus, todėl jo būsena išlieka.

Naudokite jį

Atsakymai FAQ.
Atsiveriančių nustatymų grupė.
Sąrašas, kurio bendras aukštis turėtų būti animuojamas (apgaubkite MotionList).

Props

Prop	Tipas	Numatytoji	Aprašymas
`open`	`boolean`	`true`	`false` sutraukia iki nulinio aukščio; turinys lieka prijungtas, bet paslėptas ir neaktyvus.
`children`	`ReactNode`		Turinys.
`as`	`element`	`'div'`	Atvaizduojamas elementas.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.
`onMotionComplete`	`(open) => void`		Vykdomas su `open`, kai aukštis nusistovi.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

Žiniatinklyje aukštis grojamas per Web Animations API, o turinys išlaiko įprastą išdėstymą.

React Native vaizdas apkerpa turinį ir animuoja aukštį su JS driver, nes aukštis yra išdėstymas.

Naudojama šiuose pavyzdžiuose

Pokalbio atsakymasSusilankstantys pasiūlymai, pastoviu tempu srautu ateinantis atsakymas ir besikeičianti būsenos eilutė.MotionStreamMotionListMotionSwapMotionHeight