reactjs div display 从none到block 动画

要实现从 display: none 到 display: block 的动画效果，需要使用 CSS 动画或者 JavaScript 动画。

CSS 动画：

1. 首先，将 display 属性设置为 none 的元素的 opacity 属性设置为 0。
2. 然后，在 CSS 中定义一个动画，将 opacity 属性从 0 变为 1。
3. 在需要显示元素的时候，将 display 属性设置为 block 或者 inline-block，同时添加动画类名。

示例代码：

.hidden {
  display: none;
  opacity: 0;
}

.animate {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

JavaScript 动画：

1. 首先，将 display 属性设置为 none 的元素的 opacity 属性设置为 0。
2. 在需要显示元素的时候，使用 JavaScript 动态将 display 属性设置为 block 或者 inline-block。
3. 使用 JavaScript 动画或者 CSS 动画将 opacity 属性从 0 变为 1。

示例代码：

.hidden {
  display: none;
  opacity: 0;
}

.show {
  display: inline-block;
}

.fade-in {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

JavaScript：

const element = document.getElementById('my-element');
element.classList.add('show');
setTimeout(() => {
  element.classList.add('fade-in');
}, 100);
``