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

我希望我的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实现这一点

注意：讨论中的组件用于两种场景。第一个是在页面中添加新组件时。第二种情况是组件在页面加载时呈现给页面，并包含来自数据库的数据。我只希望在向页面添加新组件时发生淡入过渡。
这非常简单

在react组件中：

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

在样式表中：

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

.fade-in {
  opacity: 1;
}

当您的组件安装时，它将立即有一个
opacity:0
，然后是一个
淡入
类，该类将设置为
opacity:1
，转换时间为2秒。
您可以这样做，但如果有转换，您将包括jquery，我建议您查看或避免jquery这会持续10秒，如果你想在转换结束后触发事件，你会怎么做？此外，当该组件装载了以前保存在数据库中的数据时，该组件需要可见，但只有在向页面添加新组件时才需要淡入效果。@JoeTidee只需使用
setTimeout
来完成10秒延迟并触发事件，如果您使用它，则无需使用
setTimeout
，它是一个非常强大的动画工具，我强烈推荐，请查看。@JoeTidee对于该组件，只需使用
opacity:0
隐藏要淡入的子组件，并使父组件表现为正常可见，这就是基于组件的应用程序的功能。