前言
遇到了一个安卓机的适配问题,点击触发 transition
动画,在动画结束后会出现细微的抖动,情况如下:
解决思路
问题代码
点击物体后,为该 div
添加一个名为 ani
的 class
,通过 transition
来执行动画,关键代码如下:
.thing{
transform-origin: center bottom;
transition: transform 0.5s;
&.ani{
transform: scale(1.2);
}
}
解决思路
把 transition
换成 animation
后发现,还是有抖动的效果。换了几次参数效果类似。最后考虑是渲染的问题,加上 translate3d
加速渲染后,问题解决了。
上偏方
偏方就是 translate3d(0,0,0)
,加上就解决问题了。
关键代码
.thing{
transform-origin: center bottom;
transition: transform 0.5s;
&.ani{
transform: scale(1.2) translate3d(0,0,0);
}
}
修改后的结果
抖动效果完全被解决了,效果如下:
总结
- CSS3 中诸如
translate3d
、rotate3d
等一些属性开启了硬件加速来提升页面性能,使动画更加流畅,遇到渲染不流畅的情况,不妨那这个偏方来试试。
更多文章
- 查看 网易创意部 其他小伙伴的文章:github.com/f2e-netease…
- 查看我的更多文章:github.com/ningbonb/bl…