Question

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

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

点击“显示：无”感觉太刺耳/不平滑。谢谢！

Answer 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;
}

只需将.fadeOut - 类添加到元素中，有关转换的更多信息，请参阅MDN article。可以在caniuse.com

查看兼容的浏览器列表

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

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

编辑：

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

为'fadeOut'交换'display none'

1 个答案: