关于几天来研究使用css3动画的一点总结

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,

  滑动流畅度会有非常明显的提高。

上一篇:lwip Packet buffers (PBUF) API 操作 集合


下一篇:转:代码的坏味道之二十 :Data Class(纯稚的数据类)或POJO