Javascript 暂时禁用CSS转换效果的最干净的方法是什么？

我有一个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插件，它正在调整这个元素的大小，我需要暂时禁用这些效果，这样我才能顺利地调整它的大小

考虑到这些效果可能来自父母，也可能根本不应用，暂时禁用（然后重新启用）这些效果的最优雅方式是什么

$('#elem').css('-webkit-transition','none !important'); 

在你的js里杀了它

---

显然，每个都要重复。

我认为您可以创建一个单独的css类，在这些情况下可以使用：

.disable-transition {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: color 0 ease-in;
  -ms-transition: none;
  transition: none;
}

然后在jQuery中切换类，如下所示：

$('#<your-element>').addClass('disable-transition');

$（'#'）.addClass（'disable-transition'）；

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

CSS：

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

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

！重要信息

是为了确保此规则具有更大的“权重”，因为ID通常比类更具体

JQuery：

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

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

---

我会在你的CSS中有这样一个类：

.no-transition { 
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}

// 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);

然后在jQuery中：

$('#elem').addClass('no-transition'); //will disable it
$('#elem').removeClass('no-transition'); //will enable it

---

我主张按照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; 
} 

.nottransition

然后可以应用于

body

元素，有效地覆盖页面上的任何转换动画：

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

简短回答 使用此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

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

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

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

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

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

首先，您可能希望创建一个“nottransition”类，您可以将该类应用于元素，以将其

*-transition

CSS属性设置为

none

。例如：

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

（放在次要位置-注意这里没有

-ms转换

。你不需要它。支持转换的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')

天真地说，您可能会认为高度的变化不会被动画化，因为它发生在应用“NotTransition”类时。但实际上，至少在我尝试过的所有现代浏览器中，它都会被动画化。问题是浏览器正在缓存它需要进行的样式更改，直到JavaScript完成执行，然后在一次回流中进行所有更改。因此，在是否启用转换没有净变化，但高度有净变化的情况下，它会进行回流。因此，它会设置高度更改的动画

您可能认为一种合理且干净的解决方法是在1ms的超时时间内完成“NotTransition”类的删除，如下所示：

.no-transition { 
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}

// 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上（在慢速和快速机器上），您有时（似乎是随机的）会得到与使用naive方法相同的行为。我想这是因为JavaScript的执行速度可能足够慢，以至于超时功能在浏览器空闲时等待执行，否则会考虑进行机会主义回流，如果出现这种情况，Firefox会在回流之前执行排队函数

我发现解决这个问题的唯一方法是在删除“NotTransition”类之前强制元素回流，刷新对它所做的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提琴，它演示了我在这里描述的三种可能的方法（一种成功的方法和两种不成功的方法）：

对于纯JS解决方案（没有CSS类），只需将

转换设置为
'none'
。要恢复CSS中指定的转换，请将
转换设置为空字符串

// 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);

如果您想从当前网页中删除CSS转换、转换和动画，只需执行我编写的这个小脚本（在浏览器控制台中）：

let filePath=”https://dl.dropboxusercontent.com/s/ep1nzckmvgjq7jr/remove_transitions_from_page.css";
让html=``；
document.querySelector（“html>head”）.insertAdjacentHTML（“beforeed”，html）；

它使用vanillaJS来加载。如果您想在scraper（Ruby Selenium）的上下文中使用它，这里还有一个github repo:
如果您想要一个简单的无jquery解决方案来阻止所有转换：

添加以下CSS：
body.no-transition*{
过渡：无！重要；
}

然后在你的js中：
document.body.classList.add（“无转换”）；
//完成您的工作，然后立即删除该类：
document.body.classList.remove（“无转换”）；
//或者，如果浏览器渲染需要更长时间，并且需要等待一两次绘制：
setTimeout（（）=>document.body.classList.remove（“无转换”），1）；
//（如果仍在应用转换，请尝试将1更改为更大的值）
这是一个对我来说很容易解决的方法。这不是对这个问题的直接回答，但仍然可以帮助别人

而不是创建本应取消转换的
nottransition
类

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

我创造了一个新的世界