問題描述

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

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屬性不受支持。猜想原因是因?yàn)榫弰?dòng)是基于數(shù)值和時(shí)間的計(jì)算(長度，百分比，角度，顏色也能轉(zhuǎn)換為數(shù)值)，文檔說明在此：http://www.w3.org/TR/css3-transitions... 。而display是一個(gè)尷尬的屬性，該計(jì)算什么值實(shí)現(xiàn)？

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

如果目標(biāo)元素中有鏈接之類那么推薦用visibility而不是opacity,因?yàn)閛pacity為0時(shí)鏈接仍可以被點(diǎn)擊。