本文介绍了CSS转换不工作,除非我使用超时的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有几个类: 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转换不工作,除非我使用超时的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 07:24
查看更多