禁用JQuery自动动画

Question

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

实际上导致JQuery自动绑定动画的确切情况是什么？因为我不总是看到这种行为。我没有使用JQuery-UI。

Answer 1

也许你正在改变高度的元素有一个css过渡属性，它对动画负责。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

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

注意

如果你采用这条路线，可能会遇到需要reflow css

的问题

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

  

有多种方法可以做到这一点 - 请参阅此处。最近的   有一个＆＃39;标准＆＃39;这样做的方法是阅读   该元素的offsetHeight属性。

     

实际上有效的解决方案是

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