除非我使用超时,否则css过渡不起作用(&;#39;)
我有两个类:hide
isdisplay: none
和transparent
isopacity: 0
。元素pr_container
具有-webkit-transition: opacity 1s
。以下基于JQuery的代码使元素以动画效果显示:
pr_container.removeClass("hide");
setTimeout(function() { pr_container.removeClass("transparent"); }, 0);
但是,当我删除setTimeout
而只删除第二个类时,没有动画。为什么?
编辑:我正在使用最新的Chrome,我还没有检查其他浏览器。
编辑:我尝试将这两个调用放在同一个setTimeout
回调中-没有动画。所以这显然是关于分离的。
编辑:这是jsFdle:http://jsfiddle.net/WfAVj/
解决方案
如果同时更改display
属性,则无法进行转换。因此,为了让它正常工作,您必须以其他方式隐藏您的元素。例如:
.hide {
height: 0;
width: 0;
/* overflow: hidden; padding: 0; border: none; */
}
http://jsfiddle.net/dfsq/WfAVj/1/
相关文章