dom动画卡顿优化方案?

clipboard.png

如图,使用react编写的一个抽奖转盘组件,由于要做可配置,转盘上面的奖品项都是dom结构实现的(没做雪碧图),不是一张背景图。使用requestAnimationFrame实现转盘动画。

但是,在iphone6上跑起来出现很明显的卡顿,目测是dom结构太多引起的。

有没有什么优化方案呢?目前我只能想到canvas...

阅读 4.3k
4 个回答

这样的效果,怎么可以用 requestAnimationFrame 呢,多万恶呀。多转几圈不小心就触发GC,然后就卡顿了一下好吧!!

像转个方向什么的,CSS transition 简直可以秒杀好JavaScript好几条街。

建议用CSS3动画

-webkit-transform:transition3d(0,0,0)开启硬件加速试试呢

建议c3动画 用transition 配合animation使用

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题