如何使用纯 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

很简单。

在你的 React 组件中：

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 class，这将把它设置为 opacity: 1，转换为 2秒。

How to fade in a React component using pure JavaScript?