CSS渐变元素

Question

我想把一个元素从可见渐变为不可见。

我知道我可以这样做:

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

这样做的问题是(现在)不可见的元素仍然存在，占用了空间。

我想让它逐渐消失，然后完全消失，就像设置了display:none一样。

Answer 1

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

要钩住转换的结尾，您可以使用如下内容:

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

使用其他浏览器的transitionEnd事件的其他前缀

Answer 2

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

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