Question

如果我将一个样式应用于一个元素并且之后添加了css过渡样式，那么转换将应用于前面的样式。这可能并不总是意图。

我通过使用settimeout（0）找到了解决方案，是否有更清晰/更正确的方法？

$("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修复它，最好的解决方案？

Answer 1

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

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

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

Answer 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>

Answer 3

我自己也遇到过这种情况，并且还找到了setTimeout解决方案。经过一番研究后，问题是浏览器如何处理调度问题。 JavaScript在自己的线程中运行，与处理UI和DOM的线程分开（这就是为什么会发生UI阻塞等问题）。

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

使用Transitions和JavaScript订购CSS样式

3 个答案: