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

#elem {
  transition: height 0.4s ease;
}

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

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


当前回答

如果你想要一个简单的非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)

其他回答

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

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

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

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

我有一个类在你的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

如果你想要一个简单的非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)

你可以用下面的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类来阻止转换,然后删除它以返回到以前的状态。这使得CSS和JQuery代码都简短、简单、易于理解。

CSS:

.notransition {
  transition: none !important;
}

注意:添加!important是为了确保该规则具有更高的优先级,因为使用ID比使用class更具体。

JQuery:

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