为了账号安全,请及时绑定邮箱和手机立即绑定

webapp中如何运用CSS3动画

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发生变化时,请在两秒后触发,并且在两秒内完成

这里举一个典型的小例子做说明:


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


animation
animation-name 对于keyframe的名称
animation-duration 动画花费时间
animation-timing-function 动画曲线
animation-delay 延迟多少毫秒a执行
animation-iteration-count 执行次数
animation-direction 是否反方向播放


我们一般使用前四个参数,这里的使用需要先创建keyframe规则,这里先来一个简单的例子:


 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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/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吧。

这里举一个更加适用于项目的例子:


 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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 }
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消