MotionHeight

Un’altezza che segue il contenuto: chiusura, apertura e cambi di contenuto.

WebReact NativeContenuto e dimensione

Provalo

Preparazione dell’esempio…

JavaScript è disattivato. Il codice qui sotto è l’esempio completo.

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

L’uso più breve

Details.jsx

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

Di che cosa si occupa al posto tuo

Anima fino all’altezza reale del contenuto, misurata al posto tuo.
Segue il contenuto quando cresce o si riduce mentre è aperto.
Parte dall’altezza sullo schermo, anche nel mezzo di una modifica.
Ridimensionare la pagina si adegua subito invece di restare indietro rispetto alla nuova larghezza.
Il contenuto chiuso resta montato ma nascosto e inerte, quindi il suo stato si conserva.

Usalo per

Risposte in una FAQ.
Un gruppo di impostazioni che si apre.
Una lista la cui altezza totale deve animarsi (avvolgi MotionList).

Props

Prop	Tipo	Predefinito	Descrizione
`open`	`boolean`	`true`	`false` riduce l’altezza a zero; il contenuto resta montato ma nascosto e inerte.
`children`	`ReactNode`		Il contenuto.
`as`	`element`	`'div'`	L’elemento da renderizzare.
`transition`	`Transition`	`spring`	Una curva di timing `{ duration, easing }` o una molla `{ tempo: 'spring', spring }`. Le molle conservano lo slancio quando vengono interrotte.
`onMotionComplete`	`(open) => void`		Viene eseguito con `open` quando l’altezza si è assestata.

Le altre props vanno all’elemento renderizzato, quindi className, style e gli event handler funzionano come sempre.

Web e React Native

Sul web l’altezza viene riprodotta dalla Web Animations API e il contenuto mantiene il suo layout normale.

Su React Native la view ritaglia il contenuto e anima l’altezza sul driver JS, perché l’altezza è layout.

Usato in questi esempi

Risposta in chatSuggerimenti che si richiudono, una risposta che arriva in streaming a ritmo costante e una riga di stato che si scambia.MotionStreamMotionListMotionSwapMotionHeight