利用getComputedStyle来暂时取消过渡

原创 greenhand 随笔 JavaScript 109阅读 2018-01-17 19:37:06 举报

getComputedStyle可以用来元素实时的样式信息,如下
html 代码

在项目中可能会碰到需要临时取消过渡效果的场景,通过常规的做法实现不了这样的效果,如下
html 代码

上面的做法是先将过渡时间设为0,然后再改变样式,然后再恢复过渡时间。但这样改变样式后依然会过渡,这是因为浏览器做了优化,会把css样式合并后再来渲染,从而导致渲染时间还是3s,所以依然会有过渡效果。

其实使用getComputedStyle就可以实现上述效果了,如下
html 代码

这时会发现,第一次改变样式时并没有触发过去,会直接渲染成目标样式,第二次改变样式时才会执行过渡。这是因为getComputedStyle要获取实时的样式,而不是获取合并后的样式,所以会强制浏览器先渲染。如果把中间的getComputedStyle去掉,会发现点击元素时根本就没有变化,因为这时浏览器会合并样式后再来渲染,合并后发现样式没有变化,也就不会渲染了。

用这种方式来取消过渡的好处是代码是同步的,不需要使用setTimeout来恢复过渡

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复