React 之 Transition，华丽转场秀的幕后秘诀

前端

2023-11-13 13:01:35

前奏：一瞥 React 中转场的魅力

试想一下，当你切换一个 React 组件时，页面上的元素会平稳地淡入淡出或滑入滑出。这种流畅的视觉效果，正是 React Transition 的杰作。

走近 React Transition 的后台

React Transition 是一组 React Hook，用于管理组件在挂载、卸载和更新过程中的视觉过渡。它使用 CSS 动画和过渡，在组件状态发生变化时创建平滑的动画效果。

过渡的生命周期

React Transition 提供了以下三个生命周期钩子，用于控制过渡：

onEnter: 在组件挂载或更新时触发。
onLeave: 在组件卸载或更新时触发。
onUpdate: 在组件更新时触发。

过渡状态

Transition 的状态由以下属性组成：

entering: 组件正在进入。
entered: 组件已进入。
exiting: 组件正在退出。
exited: 组件已退出。

实战演练：一个淡入淡出的按钮

为了加深理解，我们创建一个简单的按钮组件，在点击时淡入淡出：

import React, { useState, useTransition } from "react";

const Button = () => {
  const [isShown, setIsShown] = useState(false);
  const [transition] = useTransition();

  const handleClick = () => {
    transition(() => setIsShown(!isShown));
  };

  return (
    <button onClick={handleClick} className={transition.status}>
      {isShown ? "Hide" : "Show"}
    </button>
  );
};