我有一个DOM元素与此效果应用:
#elem {
transition: height 0.4s ease;
}
我正在写一个调整这个元素大小的jQuery插件,我需要暂时禁用这些效果,这样我就可以顺利地调整它的大小。
暂时禁用这些效果(然后重新启用它们)的最优雅的方法是什么?考虑到它们可能从父母那里应用,也可能根本不应用。
我有一个DOM元素与此效果应用:
#elem {
transition: height 0.4s ease;
}
我正在写一个调整这个元素大小的jQuery插件,我需要暂时禁用这些效果,这样我就可以顺利地调整它的大小。
暂时禁用这些效果(然后重新启用它们)的最优雅的方法是什么?考虑到它们可能从父母那里应用,也可能根本不应用。
当前回答
添加一个额外的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
其他回答
我有一个类在你的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类来阻止转换,然后删除它以返回到以前的状态。这使得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
我认为你可以创建一个单独的CSS类,你可以在这些情况下使用:
.disable-transition {
transition: none;
}
然后在jQuery中,你可以这样切换类:
$('#<your-element>').addClass('disable-transition');
如果你想要一个简单的非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)
做
$('#elem').css('-webkit-transition','none !important');
在你的js杀死它?
显然,每一个都要重复。