首页 > 代码库 > 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用
动画在webapp的现状
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发生变化时，请在两秒后触发，并且在两秒内完成
这里举一个典型的小例子做说明：
<iframe style="width: 320px; height: 120px;" src="http://sandbox.runjs.cn/show/uifpk4yt" width="320" height="240"></iframe>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Blade Demo</title> 6 <style type="text/css"> 7 * { margin: 0 0; padding: 0 0; } 8 h1 { font-size: 16px; font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;} 9 .cm-header { top: 0; height: 44px; line-height: 44px; text-align: center; background-color: #099fde; color: #fff; z-index: 960; }10 .title::after { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; display: inline-block; margin-left: 5px; vertical-align: middle; position: relative; top: -4px; -webkit-transition: all 0.3s ease-in-out; }11 .up::after { -webkit-transform: rotate(135deg); top: 1px; }12 .down::after { -webkit-transform: rotate(-45deg); top: -4px; }13 </style>14 </head>15 <body>16 <header class="cm-header">17 <h1 class="title up" id="title">18 点击我</h1>19 </header>20 <script type="text/javascript">21 var el = $(‘#title‘);22 el.on(‘click‘, function () {23 if (el.hasClass(‘up‘)) {24 el.removeClass(‘up‘);25 el.addClass(‘down‘);26 } else if (el.hasClass(‘down‘)) {27 el.removeClass(‘down‘);28 el.addClass(‘up‘);29 }30 });31 </script>32 </body>33 </html>
animation
简单的动画使用transition，复杂的动画便要使用animation了；或者说需要从一个状态到另一个状态的话，最好使用animation
animationanimation-name 对于keyframe的名称animation-duration 动画花费时间animation-timing-function 动画曲线animation-delay 延迟多少毫秒a执行animation-iteration-count 执行次数animation-direction 是否反方向播放我们一般使用前四个参数，这里的使用需要先创建keyframe规则，这里先来一个简单的例子：
<iframe style="width: 320px; height: 320px;" src="http://sandbox.runjs.cn/show/lla2toec" width="320" height="240"></iframe>
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>Blade Demo</title> 5 <style type="text/css"> 6 @-webkit-keyframes demoFrame { 7 from { left: 0; } 8 to { left: 100px; } 9 }10 div { width: 100px; top: 100px; height: 100px; background: gray; position: absolute; }11 .demo { -webkit-animation: demoFrame 1s ; }12 </style>13 <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>14 </head>15 <body>16 <div id="demo">17 </div>18 <input type="button" value="点击我开始动画" id="btn">19 <script>20 var el = $(‘#demo‘);21 var btn = $(‘#btn‘);22 el.on(‘webkitAnimationEnd‘, function () {23 el.removeClass(‘demo‘);24 });25 btn.on(‘click‘, function() {26 el.addClass(‘demo‘);27 });28 </script>29 </body>30 </html>
每次执行了动画逻辑后需要移除class达到重置效果，animationEnd便是对应回调，对应transition也有一个transitionEnd回调会在动画后触发，偶尔不灵就采用setTimeout吧。
这里举一个更加适用于项目的例子：
<iframe src="http://sandbox.runjs.cn/show/wsbglq2x" width="320" height="546"></iframe>
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>Blade Demo</title> 5 <style type="text/css"> 6 @-webkit-keyframes itemFrame { 7 from { -webkit-transform: translateY(-80px); } 8 to { -webkit-transform: translate(0); } 9 }10 * { margin: 0; padding: 0; }11 #demo li { list-style: none; border: 1px solid black; margin: 10px; padding: 10px; }12 .animateItem { -webkit-animation: itemFrame 1s ; }13 14 </style>15 <script id="others_zepto_10rc1" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/other/zepto.min.js"></script>16 </head>17 <body>18 <ul id="demo">19 </ul>20 <script>21 var el = $(‘#demo‘);22 for(var i = 0; i < 10; i++) {23 var li = $(‘<li>项目_‘ + i);24 el.append(li);25 }26 var items = $(‘#demo li‘);27 28 function animatFn() {29 $.each(items, function (i) {30 var el = $(this);31 el.css(‘-webkit-animation-delay‘, i * 50 + ‘ms‘);32 el.addClass(‘animateItem‘);33 })34 }35 36 items.on(‘webkitAnimationEnd‘, function () {37 items.removeClass(‘animateItem‘);38 items.css(‘-webkit-animation-delay‘, ‘‘);39 });40 41 animatFn();42 43 setInterval(function () {44 animatFn();45 }, 3000)46 47 </script>48 </body>49 </html>
这是一个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 }
更复杂的效果，比如模拟qq的页面转场动画，就要与专业的重构同事上场了，可以看这个代码：
https://github.com/yexiaochai/cssui/tree/gh-pages
<iframe src="http://yexiaochai.github.io/cssui/demo/debug.html#a" width="320" height="460"></iframe>
demo地址：http://yexiaochai.github.io/cssui/demo/debug.html#a
结语
初学重构，如果文中有何不足，请您留言
【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用