使用转换和JavaScript命令CSS样式

如果我将一个样式应用于一个元素，然后立即添加css转换样式，则转换将应用于前面的样式。这可能并不总是目的所在

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

致意

编辑：

---

我的意思不是如何最好地设置css样式，而是如何在应用第一个样式时顺序设置样式，而不激活第二个样式，但仅在之后，我希望在之后添加转换。settimeout修复了它，最佳解决方案？

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

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

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

---

你可以从《推特引导》一书中选一页：

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;
}

然后，当您希望淡入时，以编程方式在类中添加

：

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

您的原始div看起来像：

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

框
我自己也遇到了这个问题，还找到了setTimeout解决方案。经过一些研究，问题是浏览器如何处理调度。JavaScript在自己的线程中运行，与处理UI和DOM的线程分离（这就是为什么会出现UI阻塞之类的问题）

在这种情况下，两个JavaScript语句都在文档注册第一个更改之前运行，并最终同时应用这两个类。setTimeout（fn，0）有效地使函数异步，并将函数分流到下一个可用时机运行。这允许UI线程在添加下一个类之前赶上进度。
我建议添加css类，而不是直接在css中应用样式。至于您的问题，在级联样式表中，立即应用样式是合适的行为。“之后”-在什么之后？页面加载？单击？i介词元素，初始样式更改应在不进行转换的情况下完成，在设置初始状态后，应立即添加转换属性，以便在该转换中应用任何进一步的样式更改，简单的解决方案可能是在稍后的事件之前应用转换，我的问题更多地涉及到这样一个事实：是否有可能在不将transition应用于上一条语句的情况下设置样式和之后的转换，似乎浏览器需要一个中断（通过settimeout实现）来重新绘制请描述您想要的具体行为顺序，以便我们可以从中开始工作，而不是只关注CSS规则。您想在不进行任何转换的情况下更改不透明度，然后应用transition属性，使其对所有后续CSS更改生效吗？是的，这正是我想要的
<div class="fade">Box</div>