除非我使用超时，否则 CSS 过渡不起作用

Question

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

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的转换最终都不会有任何转换。

使用此代码：

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

只有"transpertive"类才能生成动画。。"隐藏"是即时的。因此，开始动画，如果需要，在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/

编辑：现在这两个类甚至可以合并为一个了！

感谢大家！