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

Posted 2021-03-16 baimeishaoxia

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...