1

如果我将样式应用于元素，然后立即添加 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 修复它，最好的解决方案？

4

3 回答 3

0

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

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

$("div").addClass("myClass");
于 2013-01-11T19:14:28.967 回答
0

您可以从 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>
于 2013-01-11T19:16:23.443 回答
0

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

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

于 2013-11-07T15:30:38.687 回答