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

【问题标题】：CSS transitions don't work unless I use timeout除非我使用超时，否则 CSS 转换不起作用
【发布时间】：2013-01-30 03:34:26
【问题描述】：

我有几个类：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/

【问题讨论】：

你怎么称呼这段代码？你能提供一个 jsfiddle 来显示发生了什么吗？
@Lorax 这里是：jsfiddle.net/WfAVj
如果您使用 jQuery，您是否有理由希望通过 CSS 过渡处理动画？使用.animate() 或.fadeTo() 可能会产生更好的跨浏览器功能。
涉及display 的过渡最终将完全没有过渡，AFAIK。通过使用setTimeout(func,0)，您将转换与display:none 分开，所以它可以工作。
@AlexeiAverchenko 很好，我只是想把它扔掉，因为你只在 Chrome 中测试过。无论如何，这种情况似乎已经在这里被询问/回答：stackoverflow.com/a/3332179/2034234

标签： javascript jquery css css-transitions

【解决方案1】：

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

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

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

【讨论】：

不幸的是，当我在里面有 position: fixed 元素时它不起作用，我这样做了:(
另一个问题：浏览器如何知道我现在是否要添加/删除另一个类？或者如果我把removeclass("hide")放在最后，它会很好地执行动画吗？
但是如果你removeClass('hide')最后在这种情况下你不会看到变化。
你也可以试试visibility: hidden;。

【解决方案2】：

没有合理的“curve”从一个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);

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

【讨论】：

【解决方案3】：

只有“透明”类产生动画..“隐藏”是即时的。所以开始动画，如果需要，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/

【讨论】：

这不是我担心的部分:)

【解决方案4】：

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

.test {
    -webkit-transition: visibility 1s, opacity 1s;
}

.hide {
    visibility: hidden;
}

.transparent {
    opacity: 0;
}

http://jsfiddle.net/xKgjS/

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

谢谢大家！

【讨论】：

使用visibility:hidden 与display:none 不同：jsfiddle.net/xKgjS/1 但如果它符合您的需要，那很好。