除非我使用超时，否则CSS转换不起作用

我有几个类： hide是display: none ，而transparent是opacity: 0 。 元素pr_container具有-webkit-transition: opacity 1s 。 以下基于JQuery的代码使元素出现在动画的fasion中：

 pr_container.removeClass("hide"); setTimeout(function() { pr_container.removeClass("transparent"); }, 0); 

但是，当我删除setTimeout而不是删除第二个类时，没有动画。 为什么？

编辑：我正在使用最新的Chrome，我还没有检查过其他浏览器。

编辑：我尝试将两个调用放在同一个setTimeout回调中 – 没有动画。 所以它显然是关于分离。

编辑：这是jsFiddle： http ： //jsfiddle.net/WfAVj/

Answer 1

如果要同时更改display属性，则无法进行转换。 因此，为了使其工作，您必须以其他方式隐藏元素。 例如：

 .hide { height: 0; width: 0; /* overflow: hidden; padding: 0; border: none; */ } 

http://jsfiddle.net/dfsq/WfAVj/1/

Answer 2

没有合理的“ 曲线 ”从一个display状态转换到另一个display状态，因此在当前的浏览器实现中，任何涉及display转换都将完全没有转换。

使用此代码：

 pr_container.removeClass("hide"); pr_container.removeClass("transparent"); 

您可以想象这两个语句在单个“阻塞”队列中执行，因此浏览器实际上将元素从class="hide transparent"呈现为class="" ，并且如上所述， hide类实际上使任何现有转换无效。

通过使用

 pr_container.removeClass("hide"); setTimeout(function() { pr_container.removeClass("transparent"); }, 0); 

您告诉浏览器“尽快删除”透明“类，但不在同一队列中”，因此浏览器首先删除“隐藏”，然后继续。 当浏览器认为它具有备用资源时，会发生“透明”的删除，因此转换不会失效。

Answer 3

只有“transperent”类产生动画..“隐藏”是即时的。 所以启动动画，如果需要，请在1秒后“隐藏”：

  test.addClass("transparent"); //hide after 1 sec, when the animation is done setTimeout(function() {test.addClass("hide"); }, 1000); //1000ms = 1sec 

http://jsfiddle.net/WfAVj/4/

Answer 4

通过使用链接问题中的建议，我做了一个我满意的版本：

 .test { -webkit-transition: visibility 1s, opacity 1s; } .hide { visibility: hidden; } .transparent { opacity: 0; } 

http://jsfiddle.net/xKgjS/

编辑：现在这两个类甚至可以组合成一个！

谢谢大家！