React动画的新姿势：react-transition-group

2023-11-23 19:16:45

在React中，动画是实现交互和增强用户体验的重要手段之一。React提供了丰富的动画库，其中react-transition-group是一个非常流行的动画库，它提供了丰富的组件和工具来帮助我们轻松开发各种动画效果。

1. 安装react-transition-group

npm install react-transition-group

2. 使用CSSTransition进行单个元素的动画开发

CSSTransition组件可以帮助我们轻松实现单个元素的动画效果。它接受一个名为in的属性，当in属性为true时，元素将显示并应用动画效果；当in属性为false时，元素将隐藏并应用动画效果。

import React, { useState } from "react";
import { CSSTransition } from "react-transition-group";

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

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div>Hello World!</div>
      </CSSTransition>
    </div>
  );
};

export default Fade;

在上面的代码中，我们使用CSSTransition组件来实现元素的淡入淡出效果。当我们点击按钮时，show状态将切换，从而控制元素的显示和隐藏。

3. 使用TransitionGroup进行复杂动画的开发

TransitionGroup组件可以帮助我们实现复杂动画的开发。它可以同时管理多个元素的动画效果，并且可以根据元素的进入、离开和更新状态来应用不同的动画效果。

import React, { useState } from "react";
import { TransitionGroup, CSSTransition } from "react-transition-group";

const FadeGroup = () => {
  const [items, setItems] = useState([]);

  const handleAddItem = () => {
    setItems([...items, "Hello World!"]);
  };

  const handleRemoveItem = (item) => {
    setItems(items.filter((i) => i !== item));
  };

  return (
    <div>
      <button onClick={handleAddItem}>Add Item</button>
      <TransitionGroup>
        {items.map((item, index) => (
          <CSSTransition
            key={index}
            timeout={300}
            classNames="fade"
            unmountOnExit
          >
            <div onClick={() => handleRemoveItem(item)}>{item}</div>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </div>
  );
};

export default FadeGroup;