Question

我正在从jQuery 2.0.3切换到2.1.0。

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

$('#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，将忽略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.1.0/jquery.min.js"></script>
<div class="myClass"></div>

编辑：

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

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

Answer 1

搜索后，我认为这可能与#14164期间针对问题v2.1.0 release所做的更改有关。根据标题"Reduce forced layout reflows in init or methods"。

我将v2.0.3 source code与v2.1.0 source code进行了比较，看起来围绕.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中的问题，您可以推迟执行代码并强制重绘。

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

.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>

或者，您也可以通过将脚本移动到页面底部，在 DOM元素之后加载jQuery 。令人印象深刻的是，为什么这会对Chrome产生影响，但在Firefox中并不重要;它必须与事件后绘制/绘制DOM的方式有关。

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

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

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

Answer 2

它似乎也可以使用animate（）代替css（）

$('.myClass').animate({'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>

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

编辑：

2 个答案: