css box-shadow blur 重绘导致动画卡顿
问题
在开发可拖动切换page的面板(类似安卓viewpager、前端swiper.js)时,发现给元素设置了box-shadow后拖动时和释放后的动画都很卡顿。
通过注释代码发现,是box-shadow 的 blur 属性影响了动画。
原因
究其原因,是拖动元素时,位置的改变引发了图形的重绘。
因为浏览器的图形绘制算法是按照像素定位元素,并基于该位置绘制。当元素位置发生改变,也就引发了图形的重绘
解决发方案
- 在css禁止该组件下的所有额外的图形选项。比如 .selector * {box-shadow: none;filter: none;}
- 在js中通过添加和移选择器,来动态改变其图形选项
.moving * {box-shadow: none;filter: none;}
在 ontouchstart 添加选择器,在ontouchend移除选择器 - 还有更多图形选项,自行添加
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战