react-spring动画库

使用动画库，可以提升UI体验和交互。让您的应用栩栩如生。常见的动画库有：

1. react-spring
2. Framer Motion
3. React Transition Group

1. 安装react-spring库

官网地址：https://www.react-spring.dev

npm i @react-spring/web

2. 使用

import { animated, useSpring } from '@react-spring/web'
import { Button } from 'antd'
import { useState } from 'react'

// eslint-disable-next-line react/prop-types
function FadeIn({ isVisible, children }) {
  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    y: isVisible ? 0 : 48
  })
  return (
    <animated.div style={styles}>{children}</animated.div>
  )
}

function App() {
  const [isVisible, setIsVisible] = useState(true)
  const handleClick = () => {
    setIsVisible(!isVisible)
  }
  return (
    <>
      <Button type='primary' onClick={handleClick}>点击</Button>
      <FadeIn isVisible={isVisible}>hello App</FadeIn>
    </>
  )
}

export default App

运行效果：