CSS3 中 transition-duration 对 display: none/block 属性无效？

Question

代码如下面所示，我用 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/

Answer 1

看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时链接仍可以被点击。