CSS3 中 transition-duration 对 display: none/block 属性无效?
问题描述
代码如下面所示,我用 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/
问题解答
回答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时链接仍可以被点击。
相关文章:
1. 老师,CSS3里面,选择一个DIV,这个DIV是以什么为原点进行旋转的啊?2. mysql每隔10来秒就有一次7、8MB的写入3. angular.js - 我用ng-repeat出来的数据为什么在IE11中只显示{{week}}?4. android-studio - android具体的错误在哪找啊,又没有具体的位置,很郁闷啊5. angular.js - angular的directive中link中element如何解决,is not a function?6. 数据库设计 - Binary Allow Null Default mysql数据库字段属性问题 ?7. docker start -a dockername 老是卡住,什么情况?8. dockerfile - [docker build image失败- npm install]9. angular.js - 使用angular-xeditable报错10. java - jstl中c标签无法解析报错如何解决