問題描述

代碼如下面所示，我用 transition-duration 對 display: none/block 屬性和 width 屬性進行2秒慢動作切換。但是，實際展示的時候，width 變換確實用了2秒，但display并沒有，請問這是為什么呢？

HTML

<p class=’transition-example’ id=’width-duration’> <p class='box'>o</box></p>

CSS

.transition-example { width: 40px; height: 40px; background: red; margin: 30px; color: #FFF; font-size: 20px;} #width-duration, .box { -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s;} #width-duration:hover { width: 80px;}.box { display: none;}#width-duration:hover .box { display: block; } ?

?http://jsfiddle.net/u2MXQ/

問題解答

看W3文檔中支持的屬性：http://www.w3.org/TR/css3-transitions...

目前display屬性不受支持。猜想原因是因為緩動是基于數值和時間的計算(長度，百分比，角度，顏色也能轉換為數值)，文檔說明在此：http://www.w3.org/TR/css3-transitions... 。而display是一個尷尬的屬性，該計算什么值實現？

因此解決方案是利用支持的屬性如：opacity: 0 或者 width:0, height:0 或者 visibility:hidden 來達到視覺上的隱藏效果。

如果目標元素中有鏈接之類那么推薦用visibility而不是opacity,因為opacity為0時鏈接仍可以被點擊。