使用jQuery 2.1+更改css会忽略transition属性

Question

我正在从jQuery 2.0.3切换到2.1.0.

我注意到在v2.1.0中,css transition直接设置css属性时会忽略该属性

$('#someElement').css('width','100px');

在v2.0.3中,我的元素将保持它的css转换,而我在v2.1.0中丢失了它.

我想知道为什么这会被区别对待,以及我如何"开启"过渡效果.

使用jQuery 2.0.3,css transition属性生效

$(function() {
  $('.myClass').css('width', '100px');
});

.myClass {
  height: 50px;
  width: 300px;
  background-color: red;
  transition: width 3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="myClass"></div>

使用jQuery 2.1.0,将transition忽略css 属性

$(function() {
  $('.myClass').css('width', '100px');
});

.myClass {
  height: 50px;
  width: 300px;
  background-color: red;
  transition: width 3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="myClass"></div>

编辑:

我在Chrome版本47.0.2526.106 m中看到了这种奇怪的行为

在Firefox 42.0中,两者都正常动画

Answer 1

经过搜索，我认为这可能与v2.1.0 版本期间针对问题#14164所做的更改有关。正如标题所示，“减少 init 或方法中的强制布局回流”。

我将v2.0.3 源代码与v2.1.0 源代码进行了比较，看起来似乎围绕.ready()方法以及事件如何延迟进行了一些重构。更具体地说，我认为它可能与 v2.1.0 中最初调用该方法的第 3407-3408 行有关.ready()（这在 v2.0.3 中不存在）：

// Kick off the DOM ready check even if the user does not
jQuery.ready.promise();

至于解决方法，这种转换行为似乎在浏览器之间不一致。要解决 Chrome 中的问题，您可以推迟代码的执行并强制重绘。

// Kick off the DOM ready check even if the user does not
jQuery.ready.promise();

setTimeout(function () {
  $('.myClass').css('width', '100px');
}, 0);

.myClass {
  height: 50px;
  width: 300px;
  background-color: red;
  transition: width 3s;
}

或者，您也可以通过将脚本移动到页面底部来在 DOM 元素之后加载 jQuery。为什么这在 Chrome 中会产生影响，但在 Firefox 中却无关紧要，这仍然令人困惑。它一定与事件发生后 DOM 的绘制/绘制方式有关。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="myClass"></div>

$('.myClass').css('width', '100px');

.myClass {
  height: 50px;
  width: 300px;
  background-color: red;
  transition: width 3s;
}