0

如何修改它以使其淡出并自行移除？

<script>
 close = document.getElementById("close");
 close.addEventListener('click', function() {
   preloader = document.getElementById("preloader");
   preloader.style.display = 'none';     <--- this part, obviously
 }, false);
</script>

单击“显示：无”时感觉太刺耳/不流畅。谢谢！

4

1 回答 1

1

取决于您需要支持的浏览器，您可以使用 css-transitions 来做到这一点：

.fadeOut{
    opacity: 0;
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}

只需将 -class 添加.fadeOut到元素，有关转换的更多信息，请参阅MDN 文章。可以在caniuse.com上查看兼容浏览器列表

除此之外，像 jQuery 这样的库有内置的 fadeIn/fadeOut - 效果，这些效果只是使用 JavaScript 实现的，并且兼容所有主流浏览器。（jQuery API -> 淡出）

如果您希望在没有 jQuery 的情况下执行此操作，您可以查看他们如何直接在源代码中实现它。jsapi.info是一个不错的代码浏览器，它链接了使用的内部函数，让您有机会快速查看被调用的内容以及被调用函数的外观。

编辑：

此外，我刚刚在 Codereview.SE 上偶然发现了一个可以帮助您的问题：Fade In Fade Out in pure JavaScript

于 2012-12-13T01:22:14.297 回答