ReactJS 中使用 Transition 实现 Div 内容的平滑切换

在 React 中使用 transition 来展示一个 div 的切换效果，需要使用 CSS 的 transition 属性来定义过渡效果，并且在 React 中通过添加或删除 CSS 类来控制 div 的 display 属性切换。

首先，在你的 CSS 文件中定义过渡效果，例如：

.transition-div {
  display: flex;
  transition: all 0.5s ease;
}

.hidden {
  display: none;
}

然后，在你的 React 组件中，可以使用 useState 钩子来管理 div 的显示状态，并在按钮点击时切换状态。同时，可以根据状态来添加或删除 CSS 类，从而触发过渡效果。

import React, { useState } from 'react';
import './styles.css';

export default function App() {
  const [isHidden, setIsHidden] = useState(true);

  const handleButtonClick = () => {
    setIsHidden(!isHidden);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Toggle</button>
      <div
        className={`transition-div ${isHidden ? 'hidden' : ''}`}
      >
        Content
      </div>
    </div>
  );
}

在上面的代码中，使用了 useState 钩子来创建一个名为 isHidden 的状态，并且初始值为 true。当按钮被点击时，通过调用 setIsHidden 函数来切换 isHidden 状态的值。

在 div 元素中，使用模板字符串来根据 isHidden 的状态来动态添加或删除 CSS 类。当 isHidden 为 true 时，添加 hidden 类，使 div 的 display 属性为 none；当 isHidden 为 false 时，不添加任何类，使 div 的 display 属性为 flex。

这样，当按钮被点击时，div 会根据过渡效果逐渐显示或隐藏。