在react中如何 div display 从none到block 动画不需要额外的库

可以使用CSS过渡动画来实现这个效果。具体步骤如下：

1. 在CSS中定义两个class，分别表示 display: none 和 display: block 的状态，并添加过渡动画效果：

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

.transition-enter-active {
  opacity: 1;
  display: block;
  transition: opacity 500ms ease-in-out;
}

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

.transition-exit-active {
  opacity: 0;
  display: none;
  transition: opacity 500ms ease-in-out;
}

2. 在React组件中使用 ReactCSSTransitionGroup 组件包裹需要进行动画的元素，并设置 transitionName 为定义的两个class名：

import React, { Component } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  toggleDisplay() {
    this.setState({
      show: !this.state.show
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleDisplay.bind(this)}>Toggle Display</button>
        <ReactCSSTransitionGroup
          transitionName="transition"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={500}>
          {this.state.show ?
            <div key="1" className="transition-enter transition-enter-active">
              This element will enter with a fade-in animation.
            </div>
            :
            <div key="2" className="transition-exit transition-exit-active">
              This element will exit with a fade-out animation.
            </div>
          }
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}

export default ExampleComponent;

这样，点击按钮时，元素会从 display: none 到 display: block 的状态进行动画过渡