我希望我的 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
,然后是一个 fade-in
类,将它设置为 opacity: 1
过渡 2 秒。
关于javascript - 如何使用纯 JavaScript 淡入 React 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43698648/