使用过渡和 JavaScript 排序 CSS 样式答案

【问题标题】：Order CSS Styles with Transitions and JavaScript使用过渡和 JavaScript 排序 CSS 样式
【发布时间】：2013-11-07 23:30:38
【问题描述】：

如果我将样式应用于元素，然后立即添加 css 过渡样式，则过渡将应用于前面的样式。这可能并非总是如此。

我通过使用 settimeout (0) 找到了解决方案，有没有已知的更清洁/更正确的方法？

http://jsfiddle.net/nicib83/XP9E7/

$("div").css("opacity", 1);

$("div").css("-webkit-transition", "all 0.35s");

/* Works
window.setTimeout(function () {
    $("div").css("-webkit-transition", "all 0.35s");
}, 0);
*/

最好的问候

编辑：

我的意思不是如何最好地设置 css 样式，而是如何在第一个样式应该应用时如何顺序设置样式，而第二个样式当时不活动，但只有在之后，我想在之后添加过渡。 settimeout 修复它，最好的解决方案？

【问题讨论】：

我建议添加 css 类，而不是直接在 css 中应用样式。至于您的问题，立即应用样式是 cascading 样式表中的适当行为。
“之后”——之后是什么？页面加载？点击？
i 前置元素，初始样式更改应在没有过渡的情况下完成，在设置初始状态后，应立即添加过渡属性，以便通过该过渡应用任何进一步的样式更改，简单解决方案可能是在稍后的事件之前应用转换，我的问题更多地涉及是否可以设置样式和之后的转换而不将转换应用于前一个语句，似乎浏览器需要一个休息（通过 settimeout 实现）重新绘制
请描述您想要的行为的具体顺序，这样我们就可以根据它来工作，而不是只关注 CSS 规则。您想在没有任何过渡的情况下更改不透明度，然后应用过渡属性以使其对所有后续 CSS 更改都有效？
是的，这正是我想要的

标签： javascript css-transitions

【解决方案1】：

最好预先定义一个包含您要应用的两个属性的类，然后以编程方式将该类添加到元素中。这两个属性将一起应用。

.myClass {
    opacity: 1;
    -webkit-transition: all 0.35s;
}

$("div").addClass("myClass");

【讨论】：

【解决方案2】：

您可以从 Twitter Bootstrap 的书中获取一页：

fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -moz-transition:opacity 0.15s linear;
    -o-transition:opacity 0.15s linear;
    transition:opacity 0.15s linear;
}
.fade.in{
    opacity:1;
}

然后在您希望它淡入时以编程方式添加 .in 类：

$("div").addClass("in");

你的原始 div 看起来像：

<div class="fade">Box</div>

【讨论】：

【解决方案3】：

我自己也遇到过这个问题，也找到了 setTimeout 解决方案。经过一些研究，问题是浏览器如何处理调度。 JavaScript 在自己的线程中运行，独立于处理 UI 和 DOM 的线程（这就是发生 UI 阻塞等问题的原因）。

在这种情况下，两个 JavaScript 语句在文档注册第一次更改之前运行，最终同时应用两个类。 setTimeout(fn,0) 有效地使函数异步并分流函数以在下一个可用机会运行。这允许 UI 线程在添加下一个类之前赶上。

【讨论】：