1분 안에 React 앱 애니메이션 만들기

동기 부여:

모든 종류의 웹 앱을 구축하려면 애니메이션이 좋아야 합니다. Framer 모션이나 일반 이전 CSS와 같은 타사 Lib로 애니메이션을 추가할 수 있지만 문제는 이러한 모든 옵션을 사용하려면 엄청난 양의 코드를 작성하고 모든 애니메이션 타이밍과 항목을 정의해야 한다는 것입니다. 오늘은 이 모든 것을 건너뛰고 Autoanimate을 사용하여 애니메이션을 만들어 보겠습니다.

소개 :

Autoanimate는 웹 앱에 부드러운 전환을 추가하는 제로 구성 드롭인 애니메이션 유틸리티입니다. React, Vue, Svelte 또는 기타 JavaScript 애플리케이션과 함께 사용할 수 있습니다.

설치 :

yarn add @formkit/auto-animate설치 및 구성이 전부입니다.

사용법 :

autoanimate 양식/auto-animate를 가져오고 useRef를 사용하여 상위 요소의 참조를 전달합니다.
이제 모든 하위 요소는 추가, 제거 또는 이동할 때마다 애니메이션됩니다.

import { useState, useRef, useEffect } from 'react'
import autoAnimate from '@formkit/auto-animate'

const Dropdown = () => {
  const [show, setShow] = useState(false)
  const parent = useRef(null)

  useEffect(() => {
    parent.current && autoAnimate(parent.current)
  }, [parent])

  const reveal = () => setShow(!show)

  return <div ref={parent}>
    <strong className="dropdown-label" onClick={reveal}>Click me to open!</strong>
    { show && <p className="dropdown-content" >Lorum ipsum...</p> }
  </div>
}

export default Dropdown

그게 당신의 Dropdown 애니메이션입니다.
모든 요소의 참조를 전달할 수 있으며 모든 하위 요소도 List처럼 애니메이션됩니다.

커스터마이징 :

Autoanimate는 필요한 경우 애니메이션을 사용자 정의할 수 있는 후크useAutoAnimate도 제공합니다.

App.jsx
import { useState } from 'react'
import { useAutoAnimate } from '@formkit/auto-animate/react'

const App = function () {
  const [items, setItems] = useState([0, 1, 2])
  const [parent] = useAutoAnimate({ duration: 500 })
  const add = () => setItems([...items, items.length])
  return <>
  <ul ref={parent}>
    {items.map(
      item => <li key={item}>{ item }</li>
    )}
  </ul>
  <button onClick={add}>Add number</button>
  <button onClick="{() => enableAnimations(false)}">Disable</button>
</>
}

export default App

이 포스트는 React에 초점을 맞추고 있습니다. Vanilla JS에서는 훨씬 더 쉽습니다. 기본적으로 거의 모든 JS 프로젝트에서 이것을 사용할 수 있습니다.

Link for official Website 건배입니다.