我有一个脚本，它将某些 css 样式应用于元素，然后向元素添加过渡样式，然后将另一种 css 样式应用于该元素。我想做的是让元素立即应用样式，然后为下一个更改设置动画。代码是基本的，只是设置样式，然后设置过渡样式，然后设置最终样式。但是我遇到了第一个被更改的属性（没有转换的那个）正在应用一个转换，即使我直到之后才设置转换属性。我已经仔细检查过该元素还没有应用过渡属性。为什么是这样？
此外，如果我在应用第一个样式和转换之间留有 50 毫秒的延迟，它会按预期工作。
问问题
105 次
1 回答
2
您必须在应用第一个样式后强制重新布局（以便在没有过渡的情况下处理它们），然后您可以应用导致过渡的样式。你现在这样做的方式是，所有的操作都被折叠成一个操作，因此一切都在经历转变。
获得重新布局的最简单方法是应用第一个 CSS 属性，然后setTimeout(fn, 1)在计时器回调中应用第二组属性。还有其他方法可以通过请求触发重新布局的某些属性来强制重新布局。我不记得究竟是哪些属性不在我的脑海中（需要一些研究）。
我自己没有尝试过，但我认为在你的元素上请求一个 size 属性，例如.offsetHeight会强制重新布局。浏览器意识到存在待处理的样式更改，并且这些待处理的样式更改可能会影响大小请求，因此它会在返回.offsetHeight值之前同步重新布局，从而解决您的问题。
一个有点类似的问题和答案：Bootstrap 中 CSS 转换中的“强制回流”
于 2013-10-07T00:28:18.860 回答