暂时禁用CSS过渡效果的最干净方法是什么？

Question

我有一个DOM元素，应用了以下一些/全部效果：#elem {  -webkit-transition: height 0.4s ease;  -moz-transition: height 0.4s ease;  -o-transition: height 0.4s ease;  transition: height 0.4s ease;}我正在编写一个调整此元素大小的jQuery插件，我需要暂时禁用这些效果，以便可以平滑地调整其大小。临时禁用这些效果（然后重新启用它们）的最优雅的方法是什么，因为它们可能是由父母应用的，也可能根本没有应用。

Answer 1

添加另一个阻止过渡的CSS类，然后将其删除以返回到先前的状态。这使得CSS和JQuery代码都简短，简单且易于理解。

CSS：

.notransition {

  -webkit-transition: none !important;

  -moz-transition: none !important;

  -o-transition: none !important;

  -ms-transition: none !important;

  transition: none !important;

}

!important 已添加以确保此规则将具有更多的“权重”，因为ID通常比类更具体。

jQuery的：

$('#elem').addClass('notransition'); // to remove transition

$('#elem').removeClass('notransition'); // to return to previouse transition

Answer 2

我会提倡按照DaneSoul的建议禁用动画，但是将开关设置为全局：

/*kill the transitions on any descendant elements of .notransition*/

.notransition * { 

  -webkit-transition: none !important; 

  -moz-transition: none !important; 

  -o-transition: none !important; 

  -ms-transition: none !important; 

  transition: none !important; 

} 

.notransition然后可以将其应用于body元素，从而有效覆盖页面上的所有过渡动画：

$('body').toggleClass('notransition');