工做技术点小计14条 hybrid + animate 方向

1. 设置transition 动画的时候 , js直接设置duration 和 变化值不会起做用 , 须要先设置duration , 等一小会再设置变化值

2. 安卓端 , 窗口不可见时 , window.innerHeight为 0 ;

3. keyframe + 关键帧图片动画 响应式坑 : 若 keyframe 设置的动画为 0% ~ 50% ~ 100% ; animation中step(5)表明 0 ~ 50 阶段分五步 , 50 ~ 100 阶段分5步达到关键帧 ; 响应式设计方法为 , 以background-image为例 , 图片要按照计算后实际尺寸作动画而后在两帧之间按照图的总帧数计算step便可

1. backface-visibility 属性指定元素执行翻转后背面的可见属性

2. requestAnimationFrame 意义为 : 渲染下一帧以前要作的计算

3. 计算四则运算时 , 数据 能够使用 NumType | 0 的方法转为数值类型元素 , 告诉浏览器此变量是用来作数值计算的 ( 优化 )

4. filter blur性能消耗巨大

5. 使用伪类或者div作蒙层 , 增长 pointer-events属性 nong值能够过滤全部事件 , 不影响

6. 安卓端filter:blur(); 会影响安卓端页面渲染 , 在不须要相应值 如0时应设置为none

7. chrome://inspect 安卓调试hosts 61.91.161.217 chrome-devtools-frontend.appspot.com 61.91.161.217 chrometophone.appspot.com

8. 安卓端检测页面不能再滑动时 收起webview

9. ios 9- border-radius 下有transform , 致使圆角失效

10. 安卓端transform和-webkit-transform最好只设置一个 , 从新设值的时候若是两个都有 , 那么前面被覆盖的会修改 , 后面的不会修改

11. ios使用翻转rotateX时少有问题 , 可是android可能须要使用backface-visibility:hidden; 可是ios使用此属性会出现bug...