温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何使用JavaScript函数暂时禁用CSS转换

发布时间:2021-10-15 14:17:28 来源:亿速云 阅读:120 作者:小新 栏目:web开发

这篇文章给大家分享的是有关如何使用JavaScript函数暂时禁用CSS转换的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

这个提示实际上不是一个JavaScript函数,而是一个CSS代码块。在您调整参与的CSS属性值时,暂时禁用CSS过渡可能是有用的或必要的,这应该立即发生在幕后。 Stackoverflow上的这篇文章提供了一个完成此任务的解决方案,通过在CSS中定义一个“无转换”类,您可以将该类添加到元素中以暂时停止其上的任何转换:

1

2

3

4

5

6

.notransition {<font></font>

    -webkit-transition: none !important;<font></font>

    -moz-transition: none !important;<font></font>

    -o-transition: none !important;<font></font>

    transition: none !important;<font></font>

}

例如:

1

2

3

4

5

targetel.classList.add('notransition') // disable transitions<font></font>

targetel.style.left = '10px' // update "left" property but don't transition it<font></font>

targetel.offsetHeight // Trigger a reflow, flushing the CSS changes<font></font>

targetel.classList.remove('notransition') // enable transitions again<font></font>

targetel.style.left = '500px' // transition "left" property again

如添加了“无转变”类同样重要的是回流 通过访问元素targetel.offsetHeightoffsetHeight 是一个 几个DOM属性是访问时触发要素回流),以强制浏览器履行在同坐的元素所做的每一个变化。

感谢各位的阅读!关于“如何使用JavaScript函数暂时禁用CSS转换”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI