javascript - 非常简单的 JavaScript/jQuery 示例 : unexpected evaluation order of instructions

Question

令我惊讶的是，在基于 jQuery 的 CSS 属性更改之后通过 jQuery 应用的 CSS3 转换规则实际上为该属性更改设置了动画。请看http://jsfiddle.net/zwatf/3/ :

最初，由于这两个类的默认 CSS 属性，一个 div 由两个类设置样式并具有一定的高度 (200px)。然后通过删除一个类使用 jQuery 修改高度:

$('.container').removeClass('active');

这会将高度从 200 像素降低到 15 像素。

之后，通过添加类将转换规则应用于容器:

$('.container').addClass('all-transition');

发生的事情是高度的降低变成了动画(至少在 Firefox 和 Chrome 上)。在我的世界里，如果指令的顺序有意义，这不应该发生。

我想这种行为可以得到很好的解释。为什么会这样？我该如何预防？

这是我想要实现的:

1. 使用 jQuery 修改默认样式(不是通过 CSS3 转换动画!)
2. 使用 jQuery 应用转换规则
3. 使用 jQuery 更改属性(由 CSS3 转换动画)

(1) 和 (2) 应该尽快完成，所以我不喜欢随意拖延。

Answer 1

在运行脚本时，浏览器通常会将 DOM 更改推迟到最后，以防止不必要的绘制。您可以通过读/写某些属性来强制回流:

var container = $('.container').removeClass('active');
var foo = container[0].offsetWidth;  //offsetWidth makes the browser recalculate
container.addClass('all-transition');

jsFiddle

或者您可以使用具有较短持续时间的 setTimeout，它通过让浏览器自动回流然后添加类来完成基本相同的事情。