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