我有一个应用了以下部分/所有效果的 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 插件，我需要暂时禁用这些效果，以便我可以顺利调整它的大小。
考虑到它们可能从父母那里应用或根本不应用，暂时禁用这些效果（然后重新启用它们）的最优雅的方法是什么。
使用这个 CSS：
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
加上这个JS（没有jQuery）......
someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions
或者这个带有 jQuery 的 JS ......
$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS changes
$someElement.removeClass('notransition'); // Re-enable transitions
...或使用您正在使用的任何其他库或框架的等效代码。
这实际上是一个相当微妙的问题。
首先，您可能想要创建一个“notransition”类，您可以将其应用于元素以将其*-transitionCSS 属性设置为none. 例如：
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
（次要一边-注意缺少的-ms-transition。在那里，你不需要它的Internet Explorer的第一个版本，以支持过渡。在所有为IE 10，其支持他们前缀的。）
但这只是风格，而且很容易。当你来尝试使用这个类时，你会遇到一个陷阱。陷阱是这样的代码不会像你天真地期望的那样工作：
// Don't do things this way! It doesn't work!
someElement.classList.add('notransition')
someElement.style.height = '50px' // just an example; could be any CSS change
someElement.classList.remove('notransition')
天真地，您可能认为高度的变化不会被动画化，因为它发生在应用 'notransition' 类时。但实际上，它会是动画的，至少在我尝试过的所有现代浏览器中都是如此。问题是浏览器会缓存它需要进行的样式更改，直到 JavaScript 完成执行，然后在一次重排中进行所有更改。因此，它会进行回流，其中是否启用转换没有净变化，但高度有净变化。因此，它动画高度变化。
您可能认为解决此问题的一种合理且干净的方法是将 'notransition' 类的删除包装在 1ms 超时内，如下所示：
// Don't do things this way! It STILL doesn't work!
someElement.classList.add('notransition')
someElement.style.height = '50px' // just an example; could be any CSS change
setTimeout(function () {someElement.classList.remove('notransition')}, 1);
但这也不可靠。我无法在 WebKit 浏览器中使上述代码中断，但是在 Firefox（在慢速和快速机器上）上，您有时（看似随机）会获得与使用天真的方法相同的行为。我想这样做的原因是 JavaScript 执行可能足够慢，以至于超时函数在浏览器空闲时等待执行，否则会考虑进行机会性回流，如果发生这种情况， Firefox 在重排之前执行排队功能。
我发现该问题的唯一解决方案是在删除“notransition”类之前强制重排元素，刷新对其所做的 CSS 更改。有多种方法可以做到这一点 - 请参阅此处了解一些信息。最接近“标准”的方法是读取offsetHeight元素的属性。
那么，一种真正有效的解决方案是
someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions
这是一个 JS 小提琴，它说明了我在这里描述的三种可能的方法（一种成功的方法和两种不成功的方法）：http : //jsfiddle.net/2uVAA/131/
添加一个额外的 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 比使用类更具体。
查询：
$('#elem').addClass('notransition'); // to remove transition
$('#elem').removeClass('notransition'); // to return to previouse transition
我主张按照 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');
对于纯JS的解决方案（CSS无类），只需设置transition到'none'。要恢复 CSS 中指定的过渡，请将 设置transition为空字符串。
// Remove the transition
elem.style.transition = 'none';
// Restore the transition
elem.style.transition = '';
如果您使用供应商前缀，您也需要设置它们。
elem.style.webkitTransition = 'none'
您可以使用此 css 代码禁用页面中所有元素的动画、过渡、转换
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '* {' +
'/*CSS transitions*/' +
' -o-transition-property: none !important;' +
' -moz-transition-property: none !important;' +
' -ms-transition-property: none !important;' +
' -webkit-transition-property: none !important;' +
' transition-property: none !important;' +
'/*CSS transforms*/' +
' -o-transform: none !important;' +
' -moz-transform: none !important;' +
' -ms-transform: none !important;' +
' -webkit-transform: none !important;' +
' transform: none !important;' +
' /*CSS animations*/' +
' -webkit-animation: none !important;' +
' -moz-animation: none !important;' +
' -o-animation: none !important;' +
' -ms-animation: none !important;' +
' animation: none !important;}';
document.getElementsByTagName('head')[0].appendChild(style);