css - CSS 过渡淡入淡出元素

Question

我想将一个元素从可见淡化为不可见。

我知道我可以这样做：

element {
  opacity:1;
}

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

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

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

Answer 1

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

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

Answer 2

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

要挂钩过渡的结束，您可以使用以下内容：

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

为其他浏览器使用带有 transitionEnd 事件的其他前缀。