1. 为避免合成线程频繁计算导致性能降低,
使用transform属性,尽量避免使用width / height / padding / left 等。
2. 侧边栏下阴影遮罩层动画,
如果用background:rgba(0,0,0,0) -> background:rgba(0,0,0,.3),在chrome浏览器上侧边栏的translate动画会不流畅;
改为background: #000; opacity: 0 -> opacity:0.3解决。
3.遮罩层渐入渐出效果,transition和display同用导致动画失效,
display没有动画效果,加上这个属性元素即刻便处于有或没有的状态,
改为visibility,visibility属性有渐变效果。同时,visibility:0时虽然在页面上占有位置,但不会遮挡下层页面。
4.侧边栏滑入滑出效果,
用translate3d代替translateX或transate,
同时添加will-change:transform,
滑动流畅度会有非常明显的提高。