MotionHeight

ವಿಷಯವನ್ನು ಹಿಂಬಾಲಿಸುವ ಎತ್ತರ: ಮಡಚು, ವಿಸ್ತರಿಸು ಮತ್ತು ವಿಷಯ ಬದಲಾವಣೆಗಳು.

ವೆಬ್React 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>

ಇದು ನಿಮಗಾಗಿ ನಿರ್ವಹಿಸುವುದು

ನಿಮಗಾಗಿ ಅಳೆದ ವಿಷಯದ ನಿಜವಾದ ಎತ್ತರಕ್ಕೆ ಅನಿಮೇಟ್ ಮಾಡುತ್ತದೆ.
ತೆರೆದಿರುವಾಗ ವಿಷಯ ಬೆಳೆದರೂ ಕುಗ್ಗಿದರೂ ಹಿಂಬಾಲಿಸುತ್ತದೆ.
ಬದಲಾವಣೆಯ ಮಧ್ಯದಲ್ಲೂ, ಪರದೆಯ ಮೇಲಿನ ಎತ್ತರದಿಂದ ಆರಂಭವಾಗುತ್ತದೆ.
ಪುಟದ ಗಾತ್ರ ಬದಲಿಸಿದರೆ ಹೊಸ ಅಗಲಕ್ಕೆ ಹಿಂದುಳಿಯದೆ ತಕ್ಷಣ ಹೊಂದುತ್ತದೆ.
ಮುಚ್ಚಿದ ವಿಷಯ ಮೌಂಟ್ ಆಗಿಯೇ ಇದ್ದು ಮರೆಯಾಗಿ ನಿಷ್ಕ್ರಿಯವಾಗಿರುತ್ತದೆ, ಹೀಗಾಗಿ ಅದರ state ಉಳಿಯುತ್ತದೆ.

ಇದಕ್ಕೆ ಬಳಸಿ

FAQ ನಲ್ಲಿ ಉತ್ತರಗಳು.
ತೆರೆದುಕೊಳ್ಳುವ ಸೆಟ್ಟಿಂಗ್‌ಗಳ ಗುಂಪು.
ಒಟ್ಟು ಎತ್ತರ ಅನಿಮೇಟ್ ಆಗಬೇಕಾದ ಪಟ್ಟಿ (MotionList ಅನ್ನು ಸುತ್ತಿ).

Props

Prop	ಟೈಪ್	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`open`	`boolean`	`true`	`false` ಶೂನ್ಯ ಎತ್ತರಕ್ಕೆ ಮಡಚುತ್ತದೆ; ವಿಷಯ ಮೌಂಟ್ ಆಗಿಯೇ ಇದ್ದು ಮರೆಯಾಗಿ ನಿಷ್ಕ್ರಿಯವಾಗಿರುತ್ತದೆ.
`children`	`ReactNode`		ವಿಷಯ.
`as`	`element`	`'div'`	ರೆಂಡರ್ ಮಾಡಬೇಕಾದ ಎಲಿಮೆಂಟ್.
`transition`	`Transition`	`spring`	ಟೈಮಿಂಗ್ ವಕ್ರ `{ duration, easing }` ಅಥವಾ spring `{ tempo: 'spring', spring }`. spring ಗಳು ಅಡ್ಡಿಯಾದಾಗ ತಮ್ಮ ಆವೇಗ ಉಳಿಸಿಕೊಳ್ಳುತ್ತವೆ.
`onMotionComplete`	`(open) => void`		ಎತ್ತರ ನೆಲೆಗೊಂಡ ನಂತರ `open` ನೊಂದಿಗೆ ನಡೆಯುತ್ತದೆ.

ಇತರ props ರೆಂಡರ್ ಆಗುವ ಎಲಿಮೆಂಟ್‌ಗೆ ಹೋಗುತ್ತವೆ, ಹೀಗಾಗಿ className, style ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಎಂದಿನಂತೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ.

ವೆಬ್ ಮತ್ತು React Native

ವೆಬ್‌ನಲ್ಲಿ ಎತ್ತರ Web Animations API ಮೇಲೆ ಪ್ಲೇ ಆಗುತ್ತದೆ ಮತ್ತು ವಿಷಯ ತನ್ನ ಸಾಮಾನ್ಯ ಲೇಔಟ್ ಉಳಿಸಿಕೊಳ್ಳುತ್ತದೆ.

React Native ನಲ್ಲಿ view ತನ್ನ ವಿಷಯವನ್ನು ಕತ್ತರಿಸಿ ಎತ್ತರವನ್ನು JS driver ಮೇಲೆ ಅನಿಮೇಟ್ ಮಾಡುತ್ತದೆ, ಏಕೆಂದರೆ ಎತ್ತರ ಲೇಔಟ್.

ಈ ಉದಾಹರಣೆಗಳಲ್ಲಿ ಬಳಸಲಾಗಿದೆ

ಚಾಟ್ ಉತ್ತರಮಡಚಿ ಮರೆಯಾಗುವ ಸಲಹೆಗಳು, ಸ್ಥಿರ ವೇಗದಲ್ಲಿ ಸ್ಟ್ರೀಮ್ ಆಗುವ ಉತ್ತರ ಮತ್ತು ಬದಲಾಗುವ ಸ್ಥಿತಿ ಸಾಲು.MotionStreamMotionListMotionSwapMotionHeight