javascript - 禁用 JQuery 自动动画

Question

有时，当使用 JQuery 设置元素的 css 属性(例如“height”、“max-height”)时，它会自动将动画绑定(bind)到更改。有时它很棒，但并不总是必要的。有没有办法禁用这种动画？

实际上到底是什么情况导致JQuery自动绑定(bind)动画呢？因为我并不总是看到这种行为。我没有使用 JQuery-UI。

Answer 1

也许您要更改高度的元素有一个负责动画的 css 过渡属性。

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

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

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

without transition
<div class="myClass">
</div>

借用What is the cleanest way to disable CSS transition effects temporarily?

然后您可以创建一个类来覆盖转换属性并切换该类

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

注意

如果您走这条路，您可能会遇到需要重排 css 的问题

来自What is the cleanest way to disable CSS transition effects temporarily?再次:

There are various ways to do this - see here for some. The closest thing there is to a 'standard' way of doing this is to read the offsetHeight property of the element.

One solution that actually works, then, is

$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS
changes $someElement.removeClass('notransition'); // Re-enable
transitions