如何使用纯 JavaScript 淡出 div?

Question

我的网站上有以下预加载器代码：

setTimeout(function() {
document.getElementById("loader-wrapper").style.display = 'none';
}, 1250);

<div class="loader-wrapper" id="loader-wrapper">
<div id="loading">
<div class="loader"></div>
</div>
</div>

目前div 在 1.25 秒后消失，但我如何让loader-wrapper在这 1.25 秒后淡出(不使用 CSS 或 jQuery)？

Answer 1

研究object.style.transitionJavaScript 语法。

下面是@Owen沙利文解决方案的简化运行示例。

setTimeout(function() {
var loader = document.getElementById("loader-wrapper");
loader.style.transition = '.5s';
loader.style.opacity = '0';
loader.style.visibility = 'hidden';
}, 1250);

<div class="loader-wrapper" id="loader-wrapper">
<div id="loading">
<div class="loader">loader</div>
</div>
</div>

Answer 2

您可以通过在加载器元素上使用内联样式来做到这一点：

<script>
setTimeout(function() {
var el = document.getElementById("loader-wrapper");
// 1s - time of the animation duration
// set transition property for webkit browsers only
el.style.WebkitTransition = 'opacity 1s ease-in-out;'
el.style.opacity = '0';
}, 1250);
</script>

JSbin链接。

要为所有浏览器设置过渡，您需要设置所有过渡属性。你可以从这个问题中得到如果。

有关详细信息和动画示例，请查看此问题。

Answer 3

最终对我有用的是什么：

<script>
setTimeout(function() {
var loader = document.getElementById("loader-wrapper");
loader.style.WebkitTransition = 'visibility .5s, opacity .5s';
loader.style.opacity = '0';
loader.style.visibility = 'hidden';
}, 1250);
</script>

这会将可见性设置为隐藏，并允许与loader-wrapperdiv 下的所有内容进行交互(在我的情况下，按钮和表单)。