MotionHeight

Sisältöä seuraava korkeus: tiivistäminen, laajentaminen ja sisällön muutokset.

WebReact NativeSisältö ja koko

Kokeile

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Lyhin käyttö

Details.jsx

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

Mitä se hoitaa puolestasi

Animoi sisällön todelliseen korkeuteen, joka mitataan puolestasi.
Seuraa sisältöä, kun se kasvaa tai pienenee auki ollessaan.
Alkaa näytöllä olevasta korkeudesta keskellä muutostakin.
Sivun koon muuttaminen napsahtaa heti eikä jää jälkeen uudesta leveydestä.
Suljettu sisältö pysyy kiinnitettynä mutta piilotettuna ja passiivisena, joten sen tila säilyy.

Käytä sitä

FAQ-vastaukset.
Avautuva asetusryhmä.
Lista, jonka kokonaiskorkeuden pitää animoitua (kääri MotionList).

Props

Prop	Tyyppi	Oletus	Kuvaus
`open`	`boolean`	`true`	`false` tiivistää nollakorkeuteen; sisältö pysyy kiinnitettynä mutta piilotettuna ja passiivisena.
`children`	`ReactNode`		Sisältö.
`as`	`element`	`'div'`	Renderöitävä elementti.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.
`onMotionComplete`	`(open) => void`		Suoritetaan `open`-arvon kanssa, kun korkeus on asettunut.

Muut props-arvot menevät renderöidylle elementille, joten className, style ja tapahtumankäsittelijät toimivat tavalliseen tapaan.

Web ja React Native

Webissä korkeus toistetaan Web Animations API:lla, ja sisältö säilyttää normaalin asettelunsa.

React Nativessa näkymä rajaa sisältönsä ja animoi korkeutta JS-driverilla, koska korkeus on asettelua.

Käytetty näissä esimerkeissä

KeskusteluvastausEhdotukset, jotka taittuvat pois, tasaisella tahdilla virtaava vastaus ja vaihtuva tilarivi.MotionStreamMotionListMotionSwapMotionHeight