我有一个DOM元素与此效果应用:
#elem {
transition: height 0.4s ease;
}
我正在写一个调整这个元素大小的jQuery插件，我需要暂时禁用这些效果，这样我就可以顺利地调整它的大小。
暂时禁用这些效果(然后重新启用它们)的最优雅的方法是什么?考虑到它们可能从父母那里应用，也可能根本不应用。
当前回答
如果你想从当前网页中删除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来加载这个css文件。这里还有一个github repo，以防你想在刮板(Ruby-Selenium)的上下文中使用它:remove-CSS-animations-repo
其他回答
我有一个类在你的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代码禁用页面中所有元素的动画，过渡，转换:
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '* {' +
' transition-property: none !important;' +
' transform: 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";
let html = `<link rel="stylesheet" type="text/css" href="${filePath}">`;
document.querySelector("html > head").insertAdjacentHTML("beforeend", html);
它使用vanillaJS来加载这个css文件。这里还有一个github repo，以防你想在刮板(Ruby-Selenium)的上下文中使用它:remove-CSS-animations-repo
我主张像DaneSoul建议的那样禁用动画，但要进行全局切换:
/*kill the transitions on any descendant elements of .notransition*/
.notransition * {
transition: none !important;
}
.notransition可以应用于body元素，有效地覆盖页面上的任何过渡动画:
$('body').toggleClass('notransition');
对于纯JS解决方案(没有CSS类)，只需将转换设置为“none”。若要恢复CSS中指定的转换，请将转换设置为空字符串。
// Remove the transition
elem.style.transition = 'none';
// Restore the transition
elem.style.transition = '';
如果使用供应商前缀，也需要设置这些前缀。
elem.style.webkitTransition = 'none'
