如何使用纯JavaScript淡入React组件？

Question

我希望我的React组件在安装时淡入。我的组件的最外面的DIV具有内联样式display:none。在我的componentDidMount()方法中，我有以下内容：

let el = document.querySelector('.myElement');
el.style.transition="opacity 2s";
el.style.opacity=1;

但是，组件仍然隐藏。如果我将el.style.display='block';添加到上述方法中，则该组件会立即显示，而不会有任何淡入效果。

我使用jQuery fadeIn方法尝试了同样的方法，但效果很好：

$(el).fadeIn(2000);

那么，是否可以使用纯JavaScript执行此操作？

注意：有问题的组件用于两种情况。第一种是将新组件添加到页面中。第二个是组件在页面加载时呈现到页面并包含数据库中的数据。我只希望在将新组件添加到页面时发生淡入淡出过渡。

Answer 1

这很容易。

在你的反应组件中：

componentDidMount() {
  let el = document.querySelector('.myElement');
  el.classList.add('fade-in');
}

在样式表中：

.myElement {
  opacity: 0;
  transition: 2s opacity;
}

.fade-in {
  opacity: 1;
}

当你的组件安装时，它会立即有一个opacity: 0，然后是一个fade-in类，它将把它设置为opacity: 1，转换时间为2秒。