暂时禁用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');