在react中如何 div display 从none到block 动画

可以使用CSS动画或React动画库来实现。

使用CSS动画

在CSS中定义一个动画，然后在React组件中设置一个状态，来控制该动画的触发。

例如：

@keyframes fadeIn {
  0% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: block;
  }
}

.fade-in {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

在React组件中，在需要触发动画的元素上添加一个类名，当状态改变时，添加或移除该类名。

例如：

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

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

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

  return (
    <div>
      <button onClick={handleClick}>Toggle</button>
      <div className={`fade-in ${show ? "show" : ""}`}>Hello World</div>
    </div>
  );
}

使用React动画库

React动画库可以更方便地创建和控制动画，例如React Transition Group。

使用React Transition Group，需要在组件的状态改变时，使用<CSSTransition>组件包裹需要动画的元素。

例如：

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

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

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

  return (
    <div>
      <button onClick={handleClick}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={1000}
        classNames="fade"
        unmountOnExit
      >
        <div>Hello World</div>
      </CSSTransition>
    </div>
  );
}

在CSS中定义.fade-enter、.fade-enter-active、.fade-exit、.fade-exit-active等类名，来定义元素的进入和退出动画。

例如：

.fade-enter {
  opacity: 0;
  display: none;
}

.fade-enter-active {
  opacity: 1;
  display: block;
  transition: opacity 1s ease-in;
}

.fade-exit {
  opacity: 1;
  display: block;
}

.fade-exit-active {
  opacity: 0;
  display: none;
  transition: opacity 1s ease-in;
}
``