web上漸進使用jQuery Mobile中animate相關CSS

轉載說明: 不錯的文章 一些動畫效果都有了 講解比較詳盡 下面可能有點亂 有空再整裏 實在看不下去 就去原博主那裏看看吧

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2748

一、關於animate.css

在介紹主人公之前，先說說他的親戚。

有個叫“蛋一燈(Dan Eden)”的人弄了個名叫animate.css的開源項目，實際上就是使用CSS3 animation實現了各種蛋疼或菊緊的動畫效果。

官方主頁地址：http://daneden.me/animate
github地址：https://github.com/daneden/animate.css

該項目不錯之處在於，你可以自定義你自己需要的CSS效果，自定義頁面訪問點擊這裏。

在目標瀏覽器下，鼠標移到文字上即可預覽到效果，勾選與去勾選，點擊最下面的”Build it”按鈕，可以生成你自己需要的效果的CSS文件。如下示意：

然而，從實際的角度來講，這個項目基本上屬於華麗包裝的中國式禮品，除了讓我們學習如何寫效果相對應的CSS3代碼。換句話說，有技術學習的價值，缺少實際應用的價值！因此，本文的主人公不是他，而是她！

二、jQuery Mobile中animate.css

jQuery Mobile中也有animate相關的CSS代碼（沒有animate.css之類名稱，標題這麼寫是是爲了與前一個標題呼應）。

雖然同是animation相關動畫的CSS代碼，但是，jQuery Mobile中的這個顯然更簡單更實用，更值得一說！

我抽了點拉便便的功夫，把jQuery Mobile項目中的這部分CSS代碼提出來了，放在了一個獨立的CSS文件中（有改動，兼容、命名、屬性等），您可以狠狠地點擊這裏查看或下載：animate.css

其中，相關animation動畫有：spin, fade, pop, slide, flip, turn, flow. 至於具體分別指代什麼，下面會講，稍安勿躁！

有了animate.css, 實現一些動畫效果那是非常的簡單——幾個class類名的切換而已，就算是不懂JavaScript的人，鬆鬆的幾十分鐘，也可以弄出效果來。

對於大多數同行，雖未實踐過animation動畫，但肯定也有所耳聞，這些CSS3屬性IE6~9甚至Opera瀏覽器都不支持，頂多手機項目或者iPad項目上用用，至於傳統Web上，嘖嘖，估計吃翔的可能性居多！

所以，可能“米娜桑①”現在對於animation等東西更多的是觀望，瞭解或等待之類！No, no, no, 諸位，今天我就要告訴大家，就算是需要支持IE6瀏覽器，面向各類普通用戶的傳統web項目，animate也是可以漸進使用的，而且使用成本相當相當的低的哦！喲，還不信，咱們騎驢看唱本——走着瞧！

註解：① 大家的意思。

三、 熱熱身 – slide相關CSS與幻燈片切換效果

面對新事物，鮮活的實例遠比生僻頭大的代碼、陳述之類更加吸引人。

您可以狠狠地點擊這裏：slide動畫與幻燈片切換瀏覽效果demo

在Chrome瀏覽器或者FireFox瀏覽器下（或360，遨遊，搜狗瀏覽器的極速模式），點擊圖片，您會看到圖片們向左不停地、以流暢動畫形式，顯示啊顯示啊顯示……

在不知CSS3爲何物的瀏覽器下，例如IE7這廝，圖片也會一個一個切換，只是木有動畫效果而已——對於實際應用而言，足夠了！！——我們平時的效果基本上就是這樣的，FireFox等瀏覽器更加better而已！

實現
要說如何實現的，咳咳，說穿了真是簡單地讓人吐血。

1. 顯然的，調用我提出並編輯過的animate.css文件，如下代碼：

   <link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/animate.css" type="text/css" />

2. 給要動畫的元素添加幾個關鍵的類名，例如這裏是slide效果，因此加一個名叫slide的類名，如下截圖：
   

3. 下面就是JS把in和out兩個類名切換切換就結束了！
   

好了，可以去吃晚飯了 –

四、animate.css回鍋再炒

上面的例子作用有2個：1. 提起興趣；2. 大致認識。

於是，現在，到了可以好好講講animate.css相關內容了：

• animate.css驅動下的各種動畫效果都是通過切換類名實現的；

• 類名分爲三類：公用類名、動畫關鍵字類名以及可有可無的兩個3D視角類名。
  公共類名有3個：in, out和reverse. 分別指無到有、有到無、反向。
  關鍵字類名9個：fade, pop, slide, slidefade, slidedown, slideup, flip, turn, flow. 各個效果後面有展示；
  3D視角類名2個：viewport-flip, viewport-turn. 從名字就可以看出，是flip效果和turn效果需要的。

• 雖說IE10也會支持animation動畫，但是，這裏只有moz, webkit前綴驅動，因此，IE10下無效果（您自然可以添加更多CSS使IE10以及後續的Opera瀏覽器支持）。
  
  從實際應用的角度講，爲了可以準確判斷向下不支持的瀏覽器，這樣的命名是比較推薦的。但是，5年之後，必然，這裏的命名等需要大動。

• flip效果和turn效果屬於3D變幻的範疇，因此父級元素上有必要設置：

  perspective： 1000px

  您可以使用animate.css中的viewport-flip, viewport-turn或者使用自己定義的類名。因此，我說對於animate.css而言，viewport-flip, viewport-turn不是必須的。

• animate.css中的每一行的CSS代碼都是比較高級的CSS3屬性，因此包括IE9在內的瀏覽器都是根本不認識的。這種完全不認識性，使得我們的兼容性處理就變得相當簡單了。

in, out, reverse類名的理解
各種動畫效果的實現的本質就是“使用JavaScript對in, out, reverse三個類名顛來倒去切換”。

一般而言，in表示元素從看不見到出現的動畫效果。例如fade + in的動畫效果就是淡入（圖片透明度從0到1）。而out指代元素隱藏，逝去，例如fade + out的動畫效果就是淡出（圖片透明度從1到0）。

類似的slide+in效果就是移入，slide+out效果就是移出；pop+in效果就是彈出；pop+out效果就是收進去；等等！

reverse的作用是反向。舉個例子，最簡單的slide效果：進來是slide+in，即從右往左。如果移出是slide+out則還是從右往左移出，如果移出是slide+reverse+out，則是從左往右移出，也就是原路返回！

因此，reverse一般用在獨立元素的交互效果上，例如彈框出現和彈框關閉的效果應該是完全相反的，這時候就需要用到類名reverse.

在以前的jQuery版本中，in, out動畫的時間都是一樣的，如下代碼：

.in, .out {     -webkit-animation-timing-function: ease-in-out;     -webkit-animation-duration: 350ms; }

不過現在做了不同處理，默認動畫進入350毫秒，動畫移出225毫秒。至於爲什麼做這番修改，我也不得而知，總之對相關並木有什麼糟糕的影響，我們仍可從容使用之。

五、animate.css的向下兼容

前面說過，包括IE9, Opera瀏覽器在內的瀏覽器都是不支持animate.css的動畫CSS的，如果保證這些瀏覽器的顯示也是正常的。

其實很簡單，只要讓這些瀏覽器有下面這一行CSS代碼就可以了：

.out { display: none!important; }

animate.css中out類名的本質就是以動畫形式讓元素隱藏（不可見）；其本質與直接的元素隱藏(display:none)是一樣的。

然後，什麼in, out之類的切換就完全不會影響在低版本瀏覽器上的顯示了。

下面問題來了，如何讓非目標瀏覽器上渲染display:none呢？

考慮到CSS hack太難搞，@supports目前僅FireFox17支持，我是藉助JavaScript實現的，完整代碼如下：

var BROWSER = function() {     var ua = navigator.userAgent.toLowerCase();     var match = /(webkit)[ \/]([\w.]+)/.exec( ua ) ||         /(opera)(?:.*version)?[ \/]([\w.]+)/.exec( ua ) ||         /(msie) ([\w.]+)/.exec( ua ) ||         !/compatible/.test( ua ) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec( ua ) ||         [];     return { browser: match[1] || "", version: match[2] || "0" }; }() if ((BROWSER.animate = (BROWSER.browser !== "mozilla" && BROWSER.browser !== "webkit"))) {     // 不是目標瀏覽器，創建CSS向下兼容var oStyle = document.createElement("style"), cssText = ".out{display:none!important;}";     oStyle.type = "text/css";     if (BROWSER.browser === "msie") {         oStyle.styleSheet.cssText = cssText;     } else {         oStyle.innerHTML = cssText;     }         document.getElementsByTagName("head")[0].appendChild(oStyle); }

建議代碼放在頁面的頭部，或者在頭部放入如下的JS文件鏈接代碼：

<script src="http://www.zhangxinxu.com/study/201210/animate-fix.js"></script>

如果您的頭部已經鏈接了例如jQuery框架，更簡單，直接（未測試）：

if (!$.browser.webkit && !$.browser.mozilla) $("head").append('<style>.out{display:none!important;}</style>');

六、fade以及slidefade動畫體驗

fade動畫效果
fade效果可以說是最好理解，最易識別的效果了。淡入淡出效果爲jQuery內置動畫效果，如果兩者畫個等號的話，類似這樣：

$().fadeIn() = $().addClass("fade in"); $().fadeOut() = $().addClass("fade out");

您可以狠狠地點擊這裏：fade動畫下的圖片輪播效果demo

// zxx: 下面的N多demo中也夾雜着fade效果，同時fade動畫是唯一沒有reverse參與的動畫類型。

slidefade動畫效果
slidefade是slide移動和fade淡入淡出效果的結合，您可以狠狠地點擊這裏：slidefade動畫下的圖片輪播效果demo

到目前爲止展示的三個demo，唯一不同的就是HTML代碼中的類名：

可見，CSS3 animate.css下的動畫效果完全由類名驅動的。

對於多元素且有規律的動畫效果，一般關鍵類名reverse是不參與進來的。

但是，對於單獨的元素動畫，reverse就不可或缺了。

七、slideup動畫效果展示

這裏展示slideup動畫，同時更重要的是介紹以下幾個知識點：

1. CSS控制下的動畫元素隱藏

2. 定時器控制下的動畫元素隱藏

3. reverse使用的一般規律

您可以狠狠地點擊這裏：含提示的圖片列表刪除demo

本demo含有兩個slideup效果，一個是鼠標經過圖片時候出現的含有“刪除”文字的黑色半透明提示條，如下截圖：

另外一個就是點擊“刪除”出現的“是否刪除”的提示框，如下截圖：

其中，前面slideup元素的隱藏是通過CSS限制實現的；後者是JavaScript定時器實現的。

在介紹兩種元素隱藏方法之前有必要先要脫下slideup動畫的衣服，好好窺視其真實的肌體。

slideup+in效果是向上移動到當前位置，距離爲自身高度。舉個例子，一個身高170cm的妹子站在在二樓吹頭髮；則該妹子應用slideup+in動畫的效果就是：妹子瞬間腦袋頂着1樓天花板，倏地向上移動到正好站在2樓的位置。如果我們在2樓的話，看到的就是妹子的腦袋開始從樓板上冒出來——一直到整個身體出現！

1. CSS限制下的slideup效果
這類效果，需要容器（類似上面的樓層）限制(overflow:hidden), HTML結構如下：

外部限制容器(overflow:hidden)     slideup效果元素(slideup + in/out)

於是，slideup動畫執行時候我們就會看到元素慢慢“冒出來”的效果了。

如果沒有外部容器的限制，slideup效果就是完整元素（妹子不會被樓層截掉）的上移或下降。這顯然不是我們需要的，當out觸發的時候，我們希望元素不可見（下降只是位置改變，元素依然可見）。這種情況，就需要藉助JS腳本。

2. JavaScript定時器的限制
動畫的執行的時候是固定的（CSS限制的），因此，我們可以使用JS讓動畫效果結束的時候，讓元素不可見，如display:none. demo中相關代碼如下：

// 點擊取消按鈕$("取消按鈕").bind("click", function() {     // 提示框下移動畫觸發$("提示框").addClass("reverse out").removeClass("in");         setTimeout(function() {         // 200毫秒後提示框隱藏$("提示框").hide();         }, 200); });

我們無需擔心IE6~9之類瀏覽器的兼容性問題，因爲，當元素添加類名out的時候，元素就已經隱藏了，所以延時什麼的無需擔心影響交互效果。

3. reverse的一般使用規律
如果您希望元素的out動畫與in動畫是“原路返回”的關係，則需要用到類名”reverse“. 例如demo頁面提示框的顯示與隱藏完全相反效果，則需要用到reverse.

其使用是一個路子（其他各種animate效果也是如此），我是這樣操作的：
元素進入動畫：

$("元素").addClass("in").removeClass("reverse out");

元素移出動畫：

$("元素").addClass("reverse out").removeClass("in");

addClass、removeClass順序不分先後。

於是，完整流程的效果即可實現。

初始化的時候，我都是把out, reverse預先放在元素上了，例如這裏的：slideup reverse out.

//zxx: 下面爲廣告~~注意不要勿點~~嘻嘻~~

八、pop效果和flow效果綜合實例

pop效果是元素從正面彈出彈入；flow效果是元素先變小然後再向兩側偏移。

您可以狠狠地點擊這裏：pop/flow效果下的圖片移入回車站demo

彈框提示爲pop效果，圖片移入移出回車站爲flow效果。均使用到了reverse使動畫效果鏡像，flow效果使用了setTimeout定時器控制元素的隱藏。都是上面slideup提到的東西，不再贅述。

不過，回收站的搖動效果可能大家會比較感興趣，該效果並不出自jQuery Mobile中的animate動畫效果之列，而是來自文章一開始提到的那個“蛋一燈”的animate.css中的tada效果。

相關CSS代碼demo頁面有展示，該動畫觸發模式與jQuery Mobile更重用的in/out模式不同，其直接添加動畫關鍵字類名就可以了，例如這裏，直接：

$().addClass("tada");

就可以了。

九、3D效果之flip翻轉

flip效果爲中軸翻轉，具有代表性的效果就是翻紙牌。

您可以狠狠地點擊這裏：flip動畫與翻轉紙牌動畫效果

因爲是3D效果，如果希望呈現一定的3D視角，需要在父級元素上添加類名viewport-flip或者直接添加如下CSS：

-webkit-perspective: 1000px; -moz-perspective: 1000px;

perspective屬性具體含義可參見我之前的“CSS3 3D transform詳解”一文。

原理簡述

1. 當前在前顯示的元素翻轉90度隱藏, 動畫時間225毫秒

2. 225毫秒結束後，之前顯示在後面的元素逆向90度翻轉顯示在前

3. 完成翻面效果

也就是紙牌的前後面在兩個不同的時間點進行flip效果，構成完整的紙牌翻面效果。

注：Chrome瀏覽器下需要讓元素屏幕垂直居中，以保證元素均在視角內，避免部分區域不顯示的情況發生。

十、3D效果之trun翻轉

trun效果爲沿着側邊翻轉，類似翻書，開關門效果。

您可以狠狠地點擊這裏：trun動畫與門的開關模擬效果demo

與上面flip效果類似，父標籤需要添加視角樣式，或類名viewport-turn或自己寫兩行perspective相關CSS.

如果我們把page頁面整個應用turn效果，web頁面的瀏覽就像翻書那樣，很酷的！

十一、其他相關的總結

絕對定位元素
所有這些animation動畫效果，元素本身所佔據的空間至始至終都是不變的。因此，類似幻燈片之類多元素切換的效果，勢必需要將元素設爲絕對定位元素，以佔據同一垂直空間。

再考慮到動畫會造成強烈的重繪與渲染，從性能角度講，我們必須將動畫元素脫離文檔流，也就是設置成絕對定位元素（避免強烈的迴流）。

因此，這裏，我認爲：如果您想讓一個元素應用animation驅動的動畫效果，請將其設置爲絕對定位元素。

與transition動畫對比
transition也是有動畫效果的，其特定是簡單靈活，代碼精簡。不足之處在於：
1. 不同通過CSS控制動畫的起點；
2. 不能設置動畫的斷點；
3. 動畫的驅動與值類型甚至單位有關；
4. 動畫只能是一次性的；
5. 動畫不能延遲；

等。

各有裨益，這裏不展開。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2748

（本篇完）