工做技術點小計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...