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

2020/10/15 00:21 · javascript ·  · 0评论

我有一个DOM元素,应用了以下一些/全部效果:

#elem {
  -webkit-transition: height 0.4s ease;
  -moz-transition: height 0.4s ease;
  -o-transition: height 0.4s ease;
  transition: height 0.4s ease;
}

我正在编写一个调整此元素大小的jQuery插件,我需要暂时禁用这些效果,以便可以平滑地调整其大小。

临时禁用这些效果(然后重新启用它们)的最优雅的方法是什么,因为它们可能是由父母应用的,也可能根本没有应用。

简短答案

使用此CSS:

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

再加上这个JS(没有jQuery)...

someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions

或者这个带有jQuery的JS ...

$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS changes
$someElement.removeClass('notransition'); // Re-enable transitions

...或使用您正在使用的任何其他库或框架的等效代码。

说明

这实际上是一个相当微妙的问题。

首先,您可能想创建一个'notransition'类,您可以将其应用于元素以将其*-transitionCSS属性设置none例如:

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

(次要一边-注意缺少的-ms-transition。在那里,你不需要它的Internet Explorer的第一个版本,以支持过渡。在所有为IE 10,其支持他们前缀的。)

但这只是样式,很容易。当您尝试使用此类时,您会遇到陷阱。陷阱是这样的代码无法像您天真的期望的那样工作:

// Don't do things this way! It doesn't work!
someElement.classList.add('notransition')
someElement.style.height = '50px' // just an example; could be any CSS change
someElement.classList.remove('notransition')

天真的,您可能会认为高度变化不会被动画化,因为它是在应用“ notransition”类时发生的。但是,实际上,它将动画化,至少在我尝试过的所有现代浏览器中。问题在于浏览器正在缓存需要进行的样式更改,直到JavaScript完成执行,然后在一次重排中进行所有更改。结果,它将进行重排,其中是否启用过渡没有净变化,但高度有净变化。因此,它可以动画显示高度变化。

您可能会认为解决此问题的合理而干净的方法是将对“ notransition”类的删除包装在1ms的超时时间内,如下所示:

// Don't do things this way! It STILL doesn't work!
someElement.classList.add('notransition')
someElement.style.height = '50px' // just an example; could be any CSS change
setTimeout(function () {someElement.classList.remove('notransition')}, 1);

但这也不可靠。我无法在WebKit浏览器中使以上代码中断,但是在Firefox(无论是慢速计算机还是快速计算机)上,您有时(似乎是随机的)都会得到与使用幼稚方法相同的行为。我想这是因为JavaScript的执行速度可能足够慢,以至于超时功能在浏览器闲置时等待执行,否则会考虑进行机会性重排,如果发生这种情况, Firefox在重排之前执行排队的功能。

我发现该问题的唯一解决方案是在删除“ notransition”类之前强制元素的重排,刷新对其所做的CSS更改。有多种方法可以执行此操作-请参见此处与“标准”方法最接近的方法是读取offsetHeight元素属性。

那么,一种实际可行的解决方案是

someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions

这是一个JS小提琴,它说明了我在这里描述的三种可能的方法(一种成功的方法和两种不成功的方法):http :
//jsfiddle.net/2uVAA/131/

我会提倡按照DaneSoul的建议禁用动画,但是将开关设置为全局:

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

.notransition然后可以将其应用于body元素,从而有效覆盖页面上的所有过渡动画:

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

添加另一个阻止过渡的CSS类,然后将其删除以返回到先前的状态。这使得CSS和JQuery代码都简短,简单且易于理解。

CSS

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

!important 已添加以确保此规则将具有更多的“权重”,因为ID通常比类更具体。

jQuery的

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

对于纯JS解决方案(没有CSS类),只需将设置transition'none'要恢复CSS中指定的过渡,请将设置transition为空字符串。

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

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

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

elem.style.webkitTransition = 'none'

您可以使用此CSS代码为页面中的所有元素禁用动画,过渡,变形

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '* {' +
'/*CSS transitions*/' +
' -o-transition-property: none !important;' +
' -moz-transition-property: none !important;' +
' -ms-transition-property: none !important;' +
' -webkit-transition-property: none !important;' +
'  transition-property: none !important;' +
'/*CSS transforms*/' +
'  -o-transform: none !important;' +
' -moz-transform: none !important;' +
'   -ms-transform: none !important;' +
'  -webkit-transform: none !important;' +
'   transform: none !important;' +
'  /*CSS animations*/' +
'   -webkit-animation: none !important;' +
'   -moz-animation: none !important;' +
'   -o-animation: none !important;' +
'   -ms-animation: none !important;' +
'   animation: none !important;}';
   document.getElementsByTagName('head')[0].appendChild(style);

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

.disable-transition {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: color 0 ease-in;
  -ms-transition: none;
  transition: none;
}

然后在jQuery中,您将像这样切换类:

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

这是对我来说很容易工作的解决方法。这不是问题的直接答案,但仍然可以帮助某人。

而不是创建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.classList.add("moveTransition")

然后在setTimeout中,我将其删除

element.classList.remove("moveTransition")

我无法在其他浏览器中对其进行测试,但在chrome中,它可以完美运行

如果要从当前网页中删除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文件如果您想在刮板(Ruby-Selenium)的上下文中使用它,这里还有一个github存储库:remove-CSS-animations-repo

如果您想要一个简单的no-jquery解决方案来防止所有过渡:

  1. 添加此CSS:
body.no-transition * {
  transition: none !important;
}
  1. 然后在您的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里杀了吗?

显然每个重复。

我在您的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
本文地址:http://javascript.askforanswer.com/zanshijinyongcssguoduxiaoguodezuiganjingfangfashishenme.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!