CSS过渡淡化元素

Question

我想将元素从可见变为不可见。

我知道我可以这样做：

element {
  opacity:1;
}

element.fade {
  opacity:0;
  transition: opacity .5s linear;
}

这个问题是（现在）不可见元素仍然存在，占用空间。

我希望它能够消失然后完全消失，就像设置了display:none一样。

Answer 1

不要为此使用JS。它不使用GPU，也不是COOL。

这就是你所追求的：

CSS3 transitions + display none + prevent overscroll

Answer 2

将javascript超时设置为0.5秒，然后添加额外的css

var element = document.getElementsByClassName(fade)[0];
setTimeout(function() {        
    element.style.display="none"; 
}, 500);

Answer 3

您可以挂钩transitionEnd事件，然后当淡入淡出结束时，您可以在该事件处理程序中设置display: none。或者，您可以使用不同类型的过渡，该过渡以不占空间的元素结束（例如将高度转换为0）。

要结束过渡的结束，你可以使用以下内容：

// for webkit browsers
node.addEventListener('webkitTransitionEnd', function() {
        // set to display: none here
    }, false);

对其他浏览器使用其他前缀和transitionEnd事件。