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

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

使用此CSS：

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

加上这个JS（没有jQuery）…

someElement.classList.add('notransition'); // Disable transitionsdoWhateverCssChangesYouWant(someElement);someElement.offsetHeight; // Trigger a reflow, flushing the CSS changessomeElement.classList.remove('notransition'); // Re-enable transitions

或者这个带有jQuery的JS …

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

…或使用您正在使用的任何其他库或框架的等效代码。

说明

这实际上是一个相当微妙的问题。

首先，您可能想创建一个’notransition’类，您可以将其应用于元素以将其

*-transition

CSS属性设置为

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 changesomeElement.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 changesetTimeout(function () {someElement.classList.remove('notransition')}, 1);

但这也不可靠。我无法在WebKit浏览器中使以上代码中断，但是在Firefox（无论是慢速计算机还是快速计算机）上，您有时（似乎是随机的）都会得到与使用幼稚方法相同的行为。我想这是因为Javascript的执行速度可能足够慢，以至于超时功能在浏览器闲置时等待执行，否则会考虑进行机会性重排，如果发生这种情况，
Firefox在重排之前执行排队的功能。

我发现该问题的唯一解决方案是在删除“ notransition”类之前， 强制 元素的重排，刷新对其所做的CSS更改。有多种方法可以执行此 *** 作-
有关更多信息，请参见此处。与“标准”方法最接近的方法是读取

offsetHeight

元素的属性。

那么，一种实际可行的解决方案是

someElement.classList.add('notransition'); // Disable transitionsdoWhateverCssChangesYouWant(someElement);someElement.offsetHeight; // Trigger a reflow, flushing the CSS changessomeElement.classList.remove('notransition'); // Re-enable transitions