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：

.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'类，您可以将其应用于元素以将*-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 change
someElement.classList.remove('notransition')

天真地，您可能会认为高度的变化不会被动画化，因为它会在应用“notransition”类时发生。但实际上，将动画，至少在我尝试过的所有现代浏览器中都是如此。问题是浏览器正在缓存它需要进行的样式更改，直到JavaScript完成执行，然后在单个重排中进行所有更改。因此，它会进行回流，其中对是否启用转换没有净更改，但高度会发生净变化。因此，它可以激活高度变化。

你可能认为一种合理而干净的解决方法是在1ms的超时时间内删除'notransition'类，如下所示：

// 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更改。有多种方法可以执行此操作 - 有些人请参阅here。最接近“标准”方法的方法是阅读元素的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/

Answer 2

添加一个阻止转换的其他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 3

我会提倡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');

Answer 4

对于纯JS解决方案（无CSS类），只需将transition设置为'none'即可。要恢复CSS中指定的转换，请将transition设置为空字符串。

// Remove the transition
elem.style.transition = 'none';

// Restore the transition
elem.style.transition = '';

如果您使用的是供应商前缀，则还需要设置这些前缀。

elem.style.webkitTransition = 'none'

Answer 5

您可以使用此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);

Answer 6

这对我来说很容易解决。这不是问题的直接答案，但仍然可以帮助某人。

而不是创建本应取消过渡的notransition类

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

我创建了moveTransition类

.moveTransition {
      -webkit-transition: left 3s, top 3s;
      -moz-transition: left 3s, top 3s;
      -o-transition: left 3s, top 3s;
      transition: left 3s, top 3s;
}

然后我使用js将此类添加到元素

element.classList.add("moveTransition")

后来在setTimeout中，我将其删除

element.classList.remove("moveTransition")

我无法在不同的浏览器中对其进行测试，但在chrome中，它可以完美运行

Answer 7

我认为你可以在这些情况下创建一个单独的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');

Answer 8

如果要从当前网页中删除CSS过渡，转换和动画，只需执行我写的这个小脚本（在浏览器控制台内部）即可：

let filePath = "https://dl.dropboxusercontent.com/s/ep1nzckmvgjq7jr/remove_transitions_from_page.css";
let html = `<link rel="stylesheet" type="text/css" href="${filePath}">`;
document.querySelector("html > head").insertAdjacentHTML("beforeend", html);

它使用vanillaJS加载this css-file。如果您想在刮板（Ruby-Selenium）的上下文中使用它，这里还有一个github仓库：remove-CSS-animations-repo

Answer 9

如果您想使用一种简单的无jquery解决方案来阻止所有转换：

添加此CSS：

body.no-transition * {
  transition: none !important;
}

然后在您的js中：

document.body.classList.add("no-transition");

// do your work, and then either immediately remove the class:

document.body.classList.remove("no-transition");

// or, if browser rendering takes longer and you need to wait until a paint or two:

setTimeout(() => document.body.classList.remove("no-transition"), 1);

// (try changing 1 to a larger value if the transition is still applying)

Answer 10

确实

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

你的js杀了吗？

明显重复每一个。

Answer 11

我的CSS中有一个类：

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

然后在你的jQuery中：

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

临时禁用CSS过渡效果的最简洁方法是什么？

11 个答案:

简答

说明