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

時間 2021-08-13

標籤 css html jquery css3 git github web 瀏覽器 app 框架欄目 HTML 简体版

原文原文鏈接

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

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

1、關於animate.cssjquery

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

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

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

該項目不錯之處在於，你能夠自定義你本身須要的CSS效果，自定義頁面訪問點擊這裏。web

在目標瀏覽器下，鼠標移到文字上便可預覽到效果，勾選與去勾選，點擊最下面的」Build it」按鈕，能夠生成你本身須要的效果的CSS文件。以下示意：
瀏覽器

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

2、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也是能夠漸進使用的，並且使用成本至關至關的低的哦！喲，還不信，我們騎驢看唱本——走着瞧！

註解：① 你們的意思。

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

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

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

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

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

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

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

<link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/animate.css" type="text/css" />
給要動畫的元素添加幾個關鍵的類名，例如這裏是slide效果，所以加一個名叫slide的類名，以下截圖：
下面就是JS把in和out兩個類名切換切換就結束了！

好了，能夠去吃晚飯了 –

4、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毫秒。至於爲何作這番修改，我也不得而知，總之對相關並木有什麼糟糕的影響，咱們仍可從容使用之。

5、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實現的，完整代碼以下：

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

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

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

6、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就不可或缺了。

7、slideup動畫效果展現

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

CSS控制下的動畫元素隱藏
定時器控制下的動畫元素隱藏
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: 下面爲廣告~~注意不要勿點~~嘻嘻~~

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

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