使用react切换效果

基础概念

React 切换效果通常指的是在 React 应用中实现组件之间的平滑过渡和动画效果。这种效果可以通过 CSS 动画、React 动画库（如 react-transition-group）或 JavaScript 动画来实现。

类型

CSS 动画：使用 CSS 的 transition 和 animation 属性来实现简单的动画效果。
React 动画库：如 react-transition-group，提供了一套 React 组件来管理组件进入、更新和离开时的动画。
JavaScript 动画：使用 JavaScript 直接操作 DOM 或使用动画库（如 GSAP）来实现复杂的动画效果。

应用场景

页面切换：在单页应用（SPA）中，不同页面之间的切换可以使用动画效果。
组件显示/隐藏：当某个组件需要显示或隐藏时，可以使用动画效果使其过渡更自然。
数据加载：在数据加载过程中，可以使用动画效果来提示用户等待。

示例代码

以下是一个使用 react-transition-group 实现组件切换效果的简单示例：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './App.css';

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

  return (
    <div className="App">
      <button onClick={() => setShow(!show)}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="box">Hello, React Transition!</div>
      </CSSTransition>
    </div>
  );
}

export default App;

/* App.css */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}