reactjs 一个div处于display none状态点击某个按钮 display 切换为 flex如何使用 transition 来展示

要在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会根据过渡效果逐渐显示或隐藏