暂时禁用CSS过渡效果的最干净的方法是什么?

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

#elem {
  transition: height 0.4s ease;
}

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

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

当前回答

做

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

在你的js杀死它?

显然，每一个都要重复。

其他回答

做

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

在你的js杀死它?

显然，每一个都要重复。

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

.disable-transition {
  transition: none;
}

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

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

我主张像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'

添加一个额外的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

推荐文章