您好,匿名用户
随意问技术百科期待您的加入

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

0 投票

代码如下面所示,我用 transition-duration 对 display: none/block 属性和 width 属性进行2秒慢动作切换。但是,实际展示的时候,width 变换确实用了2秒,但display并没有,请问这是为什么呢?

HTML

<div class='transition-example' id='width-duration'>
    <div class="box">o</box>
</div>

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/

用户头像 提问 2013年 9月12日 @ Pikachu 上等兵 (475 威望)
分享到:

1个回答

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

用户头像 回复 2013年 9月12日 @ Singed 上等兵 (275 威望)
选中 2013年 9月7日 @Pikachu
提一个问题:

相关问题

0 投票
1 回复 32 阅读
用户头像 提问 2012年 12月1日 @ Gemini 上等兵 (319 威望)
0 投票
1 回复 31 阅读
0 投票
1 回复 28 阅读
用户头像 提问 2012年 12月1日 @ Vladimir 上等兵 (275 威望)
0 投票
1 回复 47 阅读
用户头像 提问 2012年 12月1日 @ Zyra 上等兵 (289 威望)
0 投票
1 回复 46 阅读

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...