影响先前修改的 css 属性的 css 过渡答案

【问题标题】：css transitions affecting previously modified css properties影响先前修改的 css 属性的 css 过渡
【发布时间】：2013-10-07 08:40:38
【问题描述】：

我有一个脚本，它将某些 css 样式应用于元素，然后将过渡样式添加到元素，然后将另一种 css 样式应用于该元素。我要做的是让元素立即应用样式，然后为下一个更改设置动画。代码是基本的，只是设置样式，然后设置过渡样式，然后设置最终样式。但是我遇到了第一个被更改的属性（没有转换的那个）正在应用一个转换，即使我直到之后才设置转换属性。我已经仔细检查过该元素还没有应用过渡属性。这是为什么呢？

另外，如果我在应用第一个样式和过渡之间留有 50 毫秒的延迟，它会按预期工作。

【问题讨论】：

标签： javascript html css css-transitions

【解决方案1】：

您必须在应用第一个样式后强制重新布局（以便在没有过渡的情况下处理它们），然后您可以应用导致过渡的样式。您现在的操作方式是，所有操作都被合并为一个操作，因此一切都在进行转换。

获得重新布局的最简单方法是应用第一个 CSS 属性，然后执行 setTimeout(fn, 1) 以在计时器回调中应用第二组属性。还有其他方法可以通过请求触发重新布局的某些属性来强制重新布局。我不记得究竟是哪些属性在我脑海中浮现（需要进行一些研究）。

我自己没有尝试过，但我认为在您的元素上请求 size 属性，例如 .offsetHeight 将强制重新布局。浏览器意识到存在待处理的样式更改，并且这些待处理的样式更改可能会影响大小请求，因此它会在返回 .offsetHeight 值之前同步重新布局，从而解决您的问题。

一个有点相似的问答："Force Reflow" in CSS transitions in Bootstrap

【讨论】：

这是一个解释，而不是一个解决方案。我如何解决它？如何让我的代码等到重新布局完成后再应用转换？
@Markasoftware - 我在答案中添加了更多内容。
我很希望能够同步执行此操作，但这会起作用。谢谢！当它允许我时，我会接受答案
@Markasoftware - 我添加了一个同步解决它的想法。之前已经写过这方面的内容，因此您可能可以通过 Google 找到更多关于这方面的内容。
@Markasoftware - 添加了对类似问题和答案的引用。