在没有 jquery 的情况下淡出页面上的元素

Question

我想用 javascript 但没有 jquery 淡出我页面上的一些元素。我应该如何做到这一点？

Answer 1

在我们对您的问题的评论中的小型讨论之后，您提到您主要针对移动设备。因此，CSS transition可能是您的最佳选择，因为所有版本的 iOS 和 Android 都支持它，并且不会执行任何昂贵的 JavaScript 循环。

这是一个工作最小实现的小提琴。

HTML：

<a href="#" id="doFade">fade</a>
<div id="toFade">...</div>

CSS：

#toFade {
    -webkit-transition: opacity 2s;
    opacity: 1;
}

#toFade.faded {
    opacity: 0;
}

Javascript：

document.getElementById('doFade').addEventListener('click', function() {
    document.getElementById('toFade').className += 'faded';
});