React动画

在 React 中实现动画有多种方式，以下是一些常见的方法：

 

1. CSS 动画

- 直接使用 CSS 类来定义动画，然后通过在组件的状态变化时切换类名来触发动画。

- 例如：定义  .fadeIn  类实现淡入效果，在组件中根据条件添加或移除该类。

2.  react-transition-group  库

- 提供了  CSSTransition  和  TransitionGroup  等组件，方便处理元素的进入、退出和过渡动画。

3.  react-spring  库

 

- 基于物理原理实现动画，提供了更自然和灵活的动画效果。

4.  react-motion  库

- 用于创建高性能的动画和交互效果。

 

以使用 CSS 动画为例：

 

jsx格式：

import React, { useState } from'react';

 

function MyComponent() {

  const [show, setShow] = useState(false);

 

  const handleClick = () => {

    setShow(!show);

  };

 

  return (

    <div>

      <button onClick={handleClick}>Toggle</button>

      <div className={show? 'fadeIn' : 'fadeOut'}>

        This is animated content

      </div>

    </div>

  );

}

 

// CSS 样式

.fadeIn {

  opacity: 1;

  transition: opacity 0.5s ease-in;

}

 

.fadeOut {

  opacity: 0;

  transition: opacity 0.5s ease-out;

}

当点击按钮时，通过切换  show  状态来改变元素的类名，从而触发 CSS 定义的动画效果。