javascript - 带有 jquery 的 CSS Transition 看起来没有按预期工作

Question

我有一个 div，我希望它从字体大小 20px 过渡到字体大小 40px 并更改其颜色。我知道我可以用任何其他替代方法来实现这一点，但我想探索“过渡”的用法，但我认为有些地方不对。

如果我这样做:

$("#xxx").css({transition:"all 1500ms ease-out 0ms",color:"#00FFFF", fontSize:"40px"});

jQuery 应该首先设置“过渡”，然后设置颜色和字体大小，浏览器应该进行过渡。但事实并非如此，字体大小和颜色会立即应用。

更奇怪的是，如果我先设置过渡，然后在 2 秒后设置字体大小和颜色，那么过渡将顺利进行。为什么？

检查下面的例子。如果您打开链接，浏览器将立即应用颜色和字体大小，而不是平滑地进行过渡。为什么？

https://jsfiddle.net/hw33bghm/

Answer 1

之所以没有按照您预期的方式运行，是因为回流在 DOM 中的工作方式。 Reflow 是 Web 浏览器重新计算 DOM 中元素的位置和几何形状的过程，可以由许多事情触发，包括在本例中调整元素的 CSS 属性。

当您使用多个 CSS 属性调用 $("#xxx").css({...}); 时，您为浏览器提供了一批要执行的布局操作，它将以用户阻止的方式执行所有这些操作。您的样式会立即应用，因为在操作完成和呈现新 DOM 之前没有 transition 属性。

此外，所有现代浏览器都进行了优化以最大程度地减少回流(同样，这是一个阻塞操作，因此会影响性能)，因此如果您只是简单地分开设置您的属性:

$("#xxx").css({transition:"all 1500ms ease-out 0ms"});

$("#xxx").css({color:"#00FFFF", fontSize:"40px"});

您可能希望它设置 transition 属性，重排，然后设置 color 和 fontSize，触发转换并按此方式工作你打算。但它不会，这些操作将由浏览器批处理，并且一切都将再次发生在一次回流中。

这也是为什么当您在设置 color 和 fontSize 之前等待一秒钟时它确实起作用的原因。这些布局操作不再一起批处理，所以这次当设置了其他两个的 CSS 时，您将拥有一个 transition 属性。

有关更多信息，请查看:https://developers.google.com/speed/articles/reflow#guidelines