React Transition Group 探究（一）：Transition 组件

引言

React Transition Group 是一个 React 动画库，可以轻松地创建过渡动画。它提供了多种组件，可以满足不同的动画需求。

Transition 组件是 React Transition Group 中最基本的一个组件，可以用于创建简单的过渡动画。它可以通过设置 in 和 timeout 属性来控制动画的显示和持续时间。

Transition 组件的用法

Transition 组件的用法非常简单，只需要在需要创建动画的元素上添加 in 和 timeout 属性即可。

import { Transition } from "react-transition-group";

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

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

  return (
    <div>
      <button onClick={toggleShow}>Toggle</button>
      <Transition in={show} timeout={300}>
        {(state) => (
          <div style={{
            opacity: state === 'entering' || state === 'entered' ? 1 : 0,
            transition: 'opacity 300ms ease-in-out'
          }}>
            I am a fading div
          </div>
        )}
      </Transition>
    </div>
  );
};

在上面的代码中，我们使用了 useState 来控制动画的显示状态。当点击按钮时，show 的值会切换，导致 Transition 组件的 in 属性发生变化。当 in 属性为 true 时，动画会开始播放；当 in 属性为 false 时，动画会停止播放。

timeout 属性控制动画的持续时间。在上面的代码中，我们设置了 timeout 为 300 毫秒，这意味着动画的持续时间为 300 毫秒。

Transition 组件的 state

Transition 组件有一个 state 属性，它表示动画的当前状态。state 属性可以取以下几个值：

• entering：动画正在进入
• entered：动画已经进入
• exiting：动画正在退出
• exited：动画已经退出

我们可以通过 state 属性来控制动画的样式。在上面的代码中，我们使用 state 属性来控制动画的透明度。当动画正在进入或已经进入时，透明度为 1；当动画正在退出或已经退出时，透明度为 0。

结语

Transition 组件是 React Transition Group 中最基本的一个组件，可以用于创建简单的过渡动画。它可以通过设置 in 和 timeout 属性来控制动画的显示和持续时间。

除了 Transition 组件之外，React Transition Group 还提供了其他多种组件，可以满足不同的动画需求。在后面的文章中，我们将介绍这些组件的用法。