使用 jQuery 2.1+ 更改 css 会忽略转换属性答案

【问题标题】：Changing css with jQuery 2.1+ ignores transition property使用 jQuery 2.1+ 更改 css 会忽略转换属性
【发布时间】：2016-03-24 17:15:38
【问题描述】：

我正在从 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 中，两者都可以正常动画

【问题讨论】：

我看不出有什么不同！可能是您的浏览器有问题。
@OkiErieRinaldi 你用的是什么浏览器？我可以在最新版本的 Chrome 中重现 OP 的问题。
奇怪，我在小提琴上尝试你的代码，一切都适用于 chrome 或 firefox。但我不确定为什么它不适用于 SO 代码 sn-p 上的 chrome。 jsfiddle.net/z0qLahuu
@choz 似乎 ondomready 与 onload 导致了差异。 2.1.0 仅适用于 onload，而 2.0.3 则适用于两者
@EricPhillips 这可能与stackoverflow.com/questions/32161553/… 和code.google.com/p/chromium/issues/detail?id=451756 的问题相似

标签： javascript jquery css css-transitions jquery-2.0

【解决方案1】：

四处搜索后，我认为这可能与v2.1.0 release 期间对问题#14164 所做的更改有关。根据标题，"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>

【讨论】：

你说得对，似乎 Chrome 中的 2.1.0 不适用于 ondomready ，仅适用于 onload，而 2.0.3 则适用于 jsfiddle.net/z0qLahuu 奇怪的行为
如果您在onclick 函数中应用css ，例如$('.myClass').on('click', function(){ $('.myClass').css('width', '100px'); });，它看起来也可以工作
@EricPhillips 你是对的。我四处搜寻，可能与问题 #14164 的回流更改有关。我更新了答案。
@JoshCrozier 感谢您提供令人难以置信的彻底/研究的答案，非常感谢！

【解决方案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>

【讨论】：