javascript - 如何使用纯 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 类，将它设置为 opacity: 1 过渡 2 秒。