MotionHeight

İçeriği izleyen yükseklik: daralma, genişleme ve içerik değişiklikleri.

WebReact Nativeİçerik ve boyut

Deneyin

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

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

En kısa kullanım

Details.jsx

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

Sizin yerinize hallettikleri

Sizin için ölçülen gerçek içerik yüksekliğine canlandırır.
Açıkken içerik büyüdüğünde ya da küçüldüğünde onu izler.
Değişikliğin ortasında bile ekrandaki yükseklikten başlar.
Sayfa yeniden boyutlandırıldığında yeni genişliğin gerisinde kalmak yerine anında yerine oturur.
Kapalı içerik bağlı ama gizli ve etkisiz kalır; böylece durumu korunur.

Şunlar için kullanın

FAQ yanıtları.
Açılan bir ayar grubu.
Toplam yüksekliği canlanması gereken bir liste (MotionList'i sarın).

Props

Prop	Tip	Varsayılan	Açıklama
`open`	`boolean`	`true`	`false` sıfır yüksekliğe daraltır; içerik bağlı ama gizli ve etkisiz kalır.
`children`	`ReactNode`		İçerik.
`as`	`element`	`'div'`	Render edilecek öğe.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.
`onMotionComplete`	`(open) => void`		Yükseklik yerleşince `open` ile çalışır.

Diğer props render edilen öğeye gider; böylece className, style ve olay işleyiciler her zamanki gibi çalışır.

Web ve React Native

Web'de yükseklik Web Animations API ile oynatılır ve içerik normal düzenini korur.

React Native'de görünüm içeriğini kırpar ve yüksekliği JS driver ile canlandırır, çünkü yükseklik düzendir.

Bu örneklerde kullanıldı

Sohbet yanıtıKatlanan öneriler, sabit hızla akan bir yanıt ve değişen bir durum satırı.MotionStreamMotionListMotionSwapMotionHeight