MotionHeight

Altura que sigue a su contenido: plegar, desplegar y cambios de contenido.

WebReact NativeContenido y tamaño

Pruébalo

Preparando el ejemplo…

JavaScript está desactivado. El código de abajo es el ejemplo 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;
}

Uso mínimo

Details.jsx

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

Lo que resuelve por ti

Anima hasta la altura real del contenido, medida por ti.
Sigue al contenido cuando crece o se encoge mientras está abierto.
Empieza desde la altura en pantalla, incluso a mitad de un cambio.
Al redimensionar la página, se ajusta al instante en lugar de quedarse atrás del nuevo ancho.
El contenido cerrado sigue montado pero oculto e inerte, así que conserva su estado.

Úsalo para

Respuestas en unas preguntas frecuentes.
Un grupo de ajustes que se despliega.
Una lista cuya altura total debe animarse (envuelve MotionList).

Props

Prop	Tipo	Por defecto	Descripción
`open`	`boolean`	`true`	`false` pliega hasta altura cero; el contenido sigue montado pero oculto e inerte.
`children`	`ReactNode`		El contenido.
`as`	`element`	`'div'`	El elemento que se renderiza.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.
`onMotionComplete`	`(open) => void`		Se ejecuta con `open` cuando la altura se ha asentado.

Las demás props van al elemento renderizado, así que className, style y los manejadores de eventos funcionan como siempre.

Web y React Native

En la web, la altura se reproduce con la Web Animations API y el contenido mantiene su layout normal.

En React Native, la vista recorta su contenido y anima la altura con el driver de JS, porque la altura es layout.

Se usa en estos ejemplos

Respuesta de chatSugerencias que se pliegan, una respuesta que llega a un ritmo constante y una línea de estado que se intercambia.MotionStreamMotionListMotionSwapMotionHeight