偏方解决安卓 css transition 引起的抖动

3,986 阅读1分钟

前言

遇到了一个安卓机的适配问题,点击触发 transition 动画,在动画结束后会出现细微的抖动,情况如下:

解决思路

问题代码

点击物体后,为该 div 添加一个名为 aniclass,通过 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 中诸如 translate3drotate3d 等一些属性开启了硬件加速来提升页面性能,使动画更加流畅,遇到渲染不流畅的情况,不妨那这个偏方来试试。

更多文章