javascript - 在添加特定于过渡的 css 属性之前所做的更改会触发过渡。为什么？

Question

看看这个 jsfiddle http://jsfiddle.net/zB2Td/5/

.animate 尽管在更改尺寸后添加了类，但仍会触发动画。如果您取消注释结尾处的第二行，则过渡将不会按应有的方式开始。为什么这段代码会这样工作？什么是添加.animate而不是触发先前更改的转换的正确方法。谢谢！

Answer 1

据我了解，发生的事情是调用box.width()算作“读取”操作，如本文所定义。它强制浏览器（无论如何是 webkit）重新布局（又名回流）DOM。如果没有这个调用，浏览器在添加之前永远不会“知道”盒子是 200x200 .animate，它会假设盒子从 100x100 开始。