MotionHeight

Ύψος που ακολουθεί το περιεχόμενο: σύμπτυξη, ανάπτυξη και αλλαγές περιεχομένου.

WebReact NativeΠεριεχόμενο και μέγεθος

Δοκιμάστε το

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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

Η πιο σύντομη χρήση

Details.jsx

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

Τι αναλαμβάνει για εσάς

Κινείται ως το πραγματικό ύψος του περιεχομένου, που μετριέται για εσάς.
Ακολουθεί το περιεχόμενο όταν μεγαλώνει ή μικραίνει ενώ είναι ανοιχτό.
Ξεκινά από το ύψος στην οθόνη, ακόμη και στη μέση μιας αλλαγής.
Η αλλαγή μεγέθους της σελίδας κουμπώνει αμέσως αντί να μένει πίσω από το νέο πλάτος.
Το κλειστό περιεχόμενο μένει προσαρτημένο αλλά κρυφό και ανενεργό, οπότε η κατάστασή του διατηρείται.

Χρησιμοποιήστε το για

Απαντήσεις σε ένα FAQ.
Μια ομάδα ρυθμίσεων που ανοίγει.
Μια λίστα της οποίας το συνολικό ύψος πρέπει να κινείται (τυλίξτε το MotionList).

Props

Prop	Τύπος	Προεπιλογή	Περιγραφή
`open`	`boolean`	`true`	Το `false` συμπτύσσει σε μηδενικό ύψος· το περιεχόμενο μένει προσαρτημένο αλλά κρυφό και ανενεργό.
`children`	`ReactNode`		Το περιεχόμενο.
`as`	`element`	`'div'`	Το στοιχείο προς απόδοση.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.
`onMotionComplete`	`(open) => void`		Εκτελείται με το `open` μόλις ηρεμήσει το ύψος.

Τα υπόλοιπα props πηγαίνουν στο στοιχείο που αποδίδεται, οπότε τα className, style και οι χειριστές συμβάντων λειτουργούν κανονικά.

Web και React Native

Στο web το ύψος παίζεται στο Web Animations API και το περιεχόμενο κρατά την κανονική του διάταξη.

Στο React Native η προβολή αποκόπτει το περιεχόμενό της και κινεί το ύψος με τον JS driver, επειδή το ύψος είναι διάταξη.

Χρησιμοποιείται σε αυτά τα παραδείγματα

Απάντηση σε συνομιλίαΠροτάσεις που διπλώνουν, μια απάντηση σε ροή με σταθερό ρυθμό και μια γραμμή κατάστασης που εναλλάσσεται.MotionStreamMotionListMotionSwapMotionHeight