web上渐进使用jQuery Mobile中animate相关CSS

转载说明: 不错的文章 一些动画效果都有了 讲解比较详尽 下面可能有点乱 有空再整里 实在看不下去 就去原博主那里看看吧

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

1、关于animate.css

在介绍主人公以前，先说说他的亲戚。

有个叫“蛋一灯(Dan Eden)”的人弄了个名叫animate.css的开源项目，实际上就是使用CSS3 animation实现了各类蛋疼或菊紧的动画效果。

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

该项目不错之处在于，你能够自定义你本身须要的CSS效果，自定义页面访问点击这里。

在目标浏览器下，鼠标移到文字上便可预览到效果，勾选与去勾选，点击最下面的”Build it”按钮，能够生成你本身须要的效果的CSS文件。以下示意：

然而，从实际的角度来说，这个项目基本上属于华丽包装的中国式礼品，除了让咱们学习如何写效果相对应的CSS3代码。换句话说，有技术学习的价值，缺乏实际应用的价值！所以，本文的主人公不是他，而是她！

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而已！

实现
要说如何实现的，咳咳，说穿了真是简单地让人吐血。

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两个类名切换切换就结束了！
   

好了，能够去吃晚饭了 –

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实现的，完整代码以下：

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>');

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动画，同时更重要的是介绍如下几个知识点：

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: 下面为广告~~注意不要勿点~~嘻嘻~~

8、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");

就能够了。

9、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浏览器下须要让元素屏幕垂直居中，以保证元素均在视角内，避免部分区域不显示的状况发生。

10、3D效果之trun翻转

trun效果为沿着侧边翻转，相似翻书，开关门效果。

您能够狠狠地点击这里：trun动画与门的开关模拟效果demo

与上面flip效果相似，父标签须要添加视角样式，或类名viewport-turn或本身写两行perspective相关CSS.

若是咱们把page页面整个应用turn效果，web页面的浏览就像翻书那样，很酷的！

11、其余相关的总结

绝对定位元素
全部这些animation动画效果，元素自己所占据的空间至始至终都是不变的。所以，相似幻灯片之类多元素切换的效果，势必须要将元素设为绝对定位元素，以占据同一垂直空间。

再考虑到动画会形成强烈的重绘与渲染，从性能角度讲，咱们必须将动画元素脱离文档流，也就是设置成绝对定位元素（避免强烈的回流）。

所以，这里，我认为：若是您想让一个元素应用animation驱动的动画效果，请将其设置为绝对定位元素。

与transition动画对比
transition也是有动画效果的，其特定是简单灵活，代码精简。不足之处在于：
1. 不一样经过CSS控制动画的起点；
2. 不能设置动画的断点；
3. 动画的驱动与值类型甚至单位有关；
4. 动画只能是一次性的；
5. 动画不能延迟；

等。

各有裨益，这里不展开。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2748

（本篇完）