今天小编跟大家讲解下有关html5+css3之动画在webapp中的应用 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5+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复制代码代码如下:PS：当然 上面四个属性可以像border一样写到一堆
复制代码代码如下:.demo { transition: border 2s ease 2s; }这段代码就是告诉浏览器每当border发生变化时 请在两秒后触发 并且在两秒内完成
这里举一个典型的小例子做说明：
复制代码代码如下:<!doctype html><html><head> <meta charset="utf-8"/> <title>Blade Demo</title> <style type="text/css"> * { margin: 0 0; padding: 0 0; } h1 { font-size: 16px; font-family:"Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;} .cm-header { top: 0; height: 44px; line-height: 44px; text-align: center; background-color: #099fde; color: #fff; z-index: 960; } .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; } .up::after { -webkit-transform: rotate(135deg); top: 1px; } .down::after { -webkit-transform: rotate(-45deg); top: -4px; } </style></head><body> <header class="cm-header"> <h1 class="title up"id="title"> 点击我</h1> </header> <script type="text/javascript"> var el = $('#title'); el.on('click', function () { if (el.hasClass('up')) { el.removeClass('up'); el.addClass('down'); } else if (el.hasClass('down')) { el.removeClass('down'); el.addClass('up'); } }); </script></body></html>简单的动画使用transition 复杂的动画便要使用animation了；或者说需要从一个状态到另一个状态的话 最好使用animation
复制代码代码如下:animationanimation-name 对于keyframe的名称animation-duration 动画花费时间animation-timing-function 动画曲线animation-delay 延迟多少毫秒a执行animation-iteration-count 执行次数animation-direction 是否反方向播放我们一般使用前四个参数 这里的使用需要先创建keyframe规则 这里先来一个简单的例子：
复制代码代码如下:<html><head> <meta charset="utf-8"/> <title>Blade Demo</title> <style type="text/css"> @-webkit-keyframes demoframe { from { left: 0; } to { left: 100px; } } div { width: 100px; top: 100px; height: 100px; background: gray; position: absolute; } .demo { -webkit-animation: demoframe 1s ; } </style> <script id="others_zepto_10rc1"type="text/javascript"class="library"src="https://www.aidi.net.cn/js/sandbox/other/zepto.min.js"></script></head><body><div id="demo"></div><input type="button"value="点击我开始动画"id="btn"><script>var el = $('#demo');var btn = $('#btn');el.on('webkitAnimationEnd', function () { el.removeClass('demo');});btn.on('click', function() { el.addClass('demo');});</script></body></html>每次执行了动画逻辑后需要移除class达到重置效果 animationEnd便是对应回调 对应transition也有一个transitionEnd回调会在动画后触发 偶尔不灵就采用setTimeout吧。
这里举一个更加适用于项目的例子：
复制代码代码如下:<html><head> <meta charset="utf-8"/> <title>Blade Demo</title> <style type="text/css"> @-webkit-keyframes itemframe { from { -webkit-transform: translateY(-80px); } to { -webkit-transform: translate(0); } } * { margin: 0; padding: 0; } #demo li { list-style: none; border: 1px solid black; margin: 10px; padding: 10px; } .animateItem { -webkit-animation: itemframe 1s ; }</p><p> </style> <script id="others_zepto_10rc1"type="text/javascript"class="library"src="https://www.aidi.net.cn//css/<a href="http://sandbox.runjs.cn/js/sandbox/other/zepto.min.js"></script">http://sandbox.runjs.cn/js/sandbox/other/zepto.min.js"></script</a>></head><body><ul id="demo"></ul><script> var el = $('#demo'); for(var i = 0; i < 10; i++) { var li = $('<li>项目_' + i); el.append(li); } var items = $('#demo li');</p><p> function animatFn() { $.each(items, function (i) { var el = $(this); el.css('-webkit-animation-delay', i * 50 + 'ms'); el.addClass('animateItem'); }) }</p><p> items.on('webkitAnimationEnd', function () { items.removeClass('animateItem'); items.css('-webkit-animation-delay', ''); });</p><p> animatFn();</p><p> setInterval(function () { animatFn(); }, 3000)</p><p></script></body></html>
这是一个list页面的经典效果 做得好会让人眼前一亮 当然做得不好也会让人头疼 这里为了效果便代码上循环了下 这里有一个知识点要说下：
复制代码代码如下:浏览器的dom操作与页面渲染时互斥的以代码为例：
复制代码代码如下:$.each(items, function (i) { var el = $(this); el.css('-webkit-animation-delay', i * 50 + 'ms'); el.addClass('animateItem'); })事实上每次循环皆将class与css属性同步设置到了dom上但没有执行动画 而是整个dom操作执行结束后才执行的 如果这里代码加入时间片便不一样了
这样的话一次循环会马上执行 随后会执行其中的一个个setTimeout的代码 也可以看到setTimeout之间的时序不太好被保证 比如item有100项
复制代码代码如下:function animatFn() { $.each(items, function (i) { setTimeout($.proxy(function () { var el = $(this); el.addClass('animateItem'); }, this), 300 * i); })}更复杂的效果 比如模拟qq的页面转场动画 就要与专业的重构同事上场了 可以看这个代码：
https://github.com/yexiaochai/cssui/tree/gh-pages
demo地址：http://yexiaochai.github.io/cssui/demo/debug.html#a
结语初学重构 如果文中有何不足 请您留言
来源：爱蒂网
