我想淡化元素從可見到不可見。CSS transition fade元素
我知道我可以這樣做使用：
element {
opacity:1;
}
element.fade {
opacity:0;
transition: opacity .5s linear;
}
這樣做的問題是，（現在）不可見的元素仍然存在，佔用空間。
我希望它會消失，然後完全消失，就像設置display:none一樣。
您可以掛鉤transitionEnd事件，然後當淡出完成，你可以在事件處理程序中設置display: none。或者，您可以使用不同空間類型（例如將高度轉換爲0）結束的不同類型的轉換。
掛鉤的過渡期結束，你會使用這樣的：
// for webkit browsers
node.addEventListener('webkitTransitionEnd', function() {
// set to display: none here
}, false);
使用其他前綴與transitionEnd事件的其他瀏覽器。
設定在0.5秒一個JavaScript超時，然後只需添加額外的CSS
var element = document.getElementsByClassName(fade)[0];
setTimeout(function() {
element.style.display="none";
}, 500);
這是WebKit的唯一，但CSS轉換由所有主要瀏覽器現在支持。 – Kornel
@porneL - 是的，您必須在transtionEnd事件中使用適當的瀏覽器特定前綴。 – jfriend00