问题描述
我有几个类: hide
是 display:none
和 transparent
是 opacity:0
。元素 pr_container
有 -webkit-transition:opacity 1s
。以下基于JQuery的代码使一个元素出现在动画fasion中:
I have a couple of classes: hide
is display: none
, and transparent
is opacity: 0
. The element pr_container
has -webkit-transition: opacity 1s
. The following JQuery-based code makes an element appear in an animated fasion:
pr_container.removeClass("hide");
setTimeout(function() { pr_container.removeClass("transparent"); }, 0);
只是删除第二个类,没有动画。为什么?
However, when I remove setTimeout
and instead just remove the second class, there is no animation. Why?
编辑:我使用的是最新的Chrome,我还没有选中其他浏览器。
I'm using the latest Chrome, I haven't checked other browsers yet.
编辑:我试图把两个调用在同一个 setTimeout
回调 - 没有动画。所以很明显是分离的。
I tried putting both calls in the same setTimeout
callback - no animation. So it's clearly about separation.
编辑:这里是jsFiddle:
here's the jsFiddle: http://jsfiddle.net/WfAVj/
推荐答案
如果您要更改 display
属性。所以为了使它工作,你必须隐藏你的元素一些其他的方式。例如:
You can't make a transition if you are changing display
property at the same time. So in order to make it work you have to hide your element some other way. For example:
.hide {
height: 0;
width: 0;
/* overflow: hidden; padding: 0; border: none; */
}
这篇关于CSS转换不工作,除非我使用超时的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!