我有一个DOM元素与此效果应用:

#elem {
  transition: height 0.4s ease;
}

我正在写一个调整这个元素大小的jQuery插件,我需要暂时禁用这些效果,这样我就可以顺利地调整它的大小。

暂时禁用这些效果(然后重新启用它们)的最优雅的方法是什么?考虑到它们可能从父母那里应用,也可能根本不应用。


当前回答

这是一个对我来说很容易的解决方法。这不是对问题的直接回答,但仍然可能对某人有所帮助。

而不是创建一个应该取消转换的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中

element.classList.add("moveTransition")

之后在setTimeout中,我删除了它

element.classList.remove("moveTransition")

我无法在不同的浏览器中测试它,但在chrome中它工作得很好

其他回答

对于纯JS解决方案(没有CSS类),只需将转换设置为“none”。若要恢复CSS中指定的转换,请将转换设置为空字符串。

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

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

如果使用供应商前缀,也需要设置这些前缀。

elem.style.webkitTransition = 'none'

我认为你可以创建一个单独的CSS类,你可以在这些情况下使用:

.disable-transition {
  transition: none;
}

然后在jQuery中,你可以这样切换类:

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

如果你想从当前网页中删除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

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

在你的js杀死它?

显然,每一个都要重复。

我主张像DaneSoul建议的那样禁用动画,但要进行全局切换:

/*kill the transitions on any descendant elements of .notransition*/
.notransition * { 
  transition: none !important; 
} 

.notransition可以应用于body元素,有效地覆盖页面上的任何过渡动画:

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