javascript - 除非我使用超时，否则 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/