webapp中如何運用CSS3動畫
webapp模式的網站追求的就是一個體驗,是HTML5&CSS3浪潮下的產物,拋開體驗不說,webapp模式門檻比較高;
而體驗最佳化的一個重點便是動畫,可以說動畫是webapp的一個亮點。但也是一個難點,一個痛點,主要原因是:移動端手機的碎片化嚴重。
裝置、型號、版本、解析度等差異導致移動端需要考慮的主流情況達10多種,而Hybrid帶來的webview可以讓情況更加糟糕
所以說,近兩年想在移動端大範圍的使用動畫,或者使用webapp模式都對團隊的能力提出了要求,原因是:
① 單頁對變數汙染更加敏感
這個變數汙染包括js變數汙染,css變數汙染,雖然js可採用AMD模組消除主要問題,但css的汙染卻很難避免,有時候更甚於js
web Component是一個解決方案,但還不敢大範圍使用,因為一次UI的改變會導致各個業務團隊改變,這個代價沒有顛覆性的優勢,得不償失。
② heap值攀升
如果view的管理沒有一個有效的銷燬機制,那麼webapp模式的網站不可避免的會消耗更多的記憶體,甚至降低體驗,費力不討好
③ 手機爛,CPU爛,國產瀏覽器多而爛,私自調整webkit核心而引發的問題比比皆是,奇葩瀏覽器什麼的就不提了
所以動畫在webapp或者說在移動端的使用有其場景,他適用於小範圍的動畫,適用於view內級別的動畫,比如彈出層的動畫,細節處的動畫
不適用於頁面級別的切換,比如整個view的切換(我們看到的native中的過場動畫),view級別動畫的痛點是:手機碎片化
而view級別動畫的難點是:
① view級別的動畫不能預料dom樹的大小,大dom樹的動畫cpu吃不消
② 過場動畫不能共用window.scollTop,各個View需要維護自己的捲軸,而區域滾動是移動端另一個痛點
以上是移動端的現狀,技術雖好,有其場景。可以在高階機上使用全域性性的動畫,但是框架層面一定要提供開關機制,低端機卡幀經常發生,保證低端機的基本功能
接下來介紹一下CSS3的動畫......
CSS3的動畫
transition
transition包含四個屬性 transition-property 指定需要動畫的css屬性 transition-duration 完成過渡的實踐 transition-timing-function 過渡函式,這個一般不設定,使用ease之類的 transition-delay 動畫延遲多少秒執行
PS:當然,上面四個屬性可以像border一樣寫到一堆
1 .demo { 2 transition: border 2s ease 2s; 3 }
這段程式碼就是告訴瀏覽器每當border發生變化時,請在兩秒後觸發,並且在兩秒內完成
這裡舉一個典型的小例子做說明:
1 html> 2 3 4 5Blade Demo 6 14 15 1617 2018 點選我
19
animation
簡單的動畫使用transition,複雜的動畫便要使用animation了;或者說需要從一個狀態到另一個狀態的話,最好使用animation
animation animation-name 對於keyframe的名稱 animation-duration 動畫花費時間 animation-timing-function 動畫曲線 animation-delay 延遲多少毫秒a執行 animation-iteration-count 執行次數 animation-direction 是否反方向播放
我們一般使用前四個引數,這裡的使用需要先建立keyframe規則,這裡先來一個簡單的例子:
1 2 3 4Blade Demo 5 13 14 15 161718 19
每次執行了動畫邏輯後需要移除class達到重置效果,animationEnd便是對應回撥,對應transition也有一個transitionEnd回撥會在動畫後觸發,偶爾不靈就採用setTimeout吧。
這裡舉一個更加適用於專案的例子:
1 2 3 4Blade Demo 5 15 16 17 18
-
19
這是一個list頁面的經典效果,做得好會讓人眼前一亮,當然做得不好也會讓人頭疼,這裡為了效果便程式碼上迴圈了下,這裡有一個知識點要說下:
瀏覽器的dom操作與頁面渲染時互斥的
以程式碼為例:
1 $.each(items, function (i) { 2 var el = $(this); 3 el.css('-webkit-animation-delay', i * 50 + 'ms'); 4 el.addClass('animateItem'); 5 })
事實上每次迴圈皆將class與css屬性同步設定到了dom上但沒有執行動畫,而是整個dom操作執行結束後才執行的,如果這裡程式碼加入時間片便不一樣了
這樣的話一次迴圈會馬上執行,隨後會執行其中的一個個setTimeout的程式碼,也可以看到setTimeout之間的時序不太好被保證,比如item有100項
1 function animatFn() { 2 $.each(items, function (i) { 3 setTimeout($.proxy(function () { 4 var el = $(this); 5 el.addClass('animateItem'); 6 }, this), 300 * i); 7 }) 8 }
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/506/viewspace-2800754/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 【HTML5&CSS3進階04】CSS3動畫應該如何在webapp中運用HTMLCSSS3動畫WebAPP
- CSS中的一下小技巧2之CSS3動畫勾選運用CSSS3動畫
- CSS3中用background-image實現粒子動畫效果CSSS3動畫
- 如何觸發css3過渡動畫CSSS3動畫
- css3常用動畫+動畫庫CSSS3動畫
- CSS3動畫CSSS3動畫
- 10款jQuery/CSS3動畫應用 超實用jQueryCSSS3動畫
- Apollo GraphQL 在 webapp 中應用的思考WebAPP
- CSS3動畫之逐幀動畫CSSS3動畫
- CSS3 動畫解析CSSS3動畫
- CSS3 animation 動畫CSSS3動畫
- css3動畫整理CSSS3動畫
- 如何在Swiper內製作CSS3動畫效果CSSS3動畫
- CSS3 元素水平運動和背景色切換動畫效果CSSS3動畫
- CSS3 3D 行星運轉動畫 + 瀏覽器渲染原理CSSS33D動畫瀏覽器
- CSS3動畫基礎CSSS3動畫
- css3高階動畫CSSS3動畫
- 淺談CSS3動畫CSSS3動畫
- css3動畫總結CSSS3動畫
- css3 動畫(一) transitionCSSS3動畫
- 全面梳理 CSS3 動畫CSSS3動畫
- css3 animation動畫技巧CSSS3動畫
- 「CSS3 」動畫詳解CSSS3動畫
- 用 CSS3 和 JavaScript 製作徑向動畫選單CSSS3JavaScript動畫
- 8款超酷而實用的CSS3按鈕動畫CSSS3動畫
- 第8章 CSS3中的變形與動畫(上)CSSS3動畫
- 第9章 CSS3中的變形與動畫(下)CSSS3動畫
- 基於CSS3的WEBAPP橫向滑動模式演化CSSS3WebAPP模式
- CSS3 animation逐幀動畫CSSS3動畫
- CSS3實現流星動畫CSSS3動畫
- CSS3動畫按鈕效果CSSS3動畫
- CSS3過渡和動畫CSSS3動畫
- CSS3的動畫屬性CSSS3動畫
- 多重web應用中webapp. root重用的問題WebAPP
- Flutter 中如何繪製動畫Flutter動畫
- Android 中如何使用動畫Android動畫
- 動態IP代理是如何在電商運營中運用的?
- IOS啟用WebApp全屏模式iOSWebAPP模式