9

我正在从 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，csstransition属性生效 

$(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 中，csstransition属性被忽略 

$(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 中，两者都可以正确设置动画

4

2 回答 2

3

经过一番搜索，我认为这可能与v2.1.0 发布期间对 issue #14164所做的更改有关。根据标题，“减少 init 或方法中的强制布局回流”。

我将v2.0.3 源代码与v2.1.0源代码进行了比较，看起来围绕.ready()方法和事件延迟的方式进行了一些重构。更具体地说，我认为它可能与.ready()最初调用该方法的 v2.1.0 中的第 3407-3408 行有关（这在 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>

于 2015-12-18T03:48:50.307 回答
1

它似乎也可以使用 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>

于 2015-12-18T04:09:31.897 回答