除非我使用超时，否则css过渡不起作用(&amp；#39；) [英] CSS transitions don't work unless I use timeout

问题描述

我有两个类：hideisdisplay: none和transparentisopacity: 0。元素pr_container具有-webkit-transition: opacity 1s。以下基于JQuery的代码使元素以动画效果显示：

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

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

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

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

编辑：这是jsFdle：http://jsfiddle.net/WfAVj/

推荐答案

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

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

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

这篇关于除非我使用超时，否则css过渡不起作用(&amp；#39；)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！