avalon2实际上没有实现完整的动画模块，它只是对现有的CSS3动画或jquery animate再包装一层。

我们先说如何用CSS3为avalon实现动画效果。首先要使用avalon.effect注册一个特效。

  1. avalon.effect(name, definition)

所有注册了的特效，都可以在avalon.effects对象中找到。

css3动画要求我们至少添加4个类名。这个是从angular那里学过来的。因此如何你以前的项目是基于angular，它那些CSS动画类可以原封不动地搬过来用。

  1. avalon.effect('animate', {
  2.     enterClass: 'animate-enter',
  3.     enterActiveClass: 'animate-enter-active',
  4.     leaveClass: 'animate-leave',
  5.     leaveActiveClass: 'animate-leave-active',
  6. })

当然，这些类名会默认帮你添加，因为它内部是这样实现的。

  1. avalon.effect = function (name, definition) {
  2.     avalon.effects[name] = definition
  3.     if (support.css) {
  4.         if (!definition.enterClass) {
  5.             definition.enterClass = name + '-enter'
  6.         }
  7.         if (!definition.enterActiveClass) {
  8.             definition.enterActiveClass = definition.enterClass + '-active'
  9.         }
  10.         if (!definition.leaveClass) {
  11.             definition.leaveClass = name + '-leave'
  12.         }
  13.         if (!definition.leaveActiveClass) {
  14.             definition.leaveActiveClass = definition.leaveClass + '-active'
  15.         }
  17.     }
  18.     if (!definition.action) {
  19.         definition.action = 'enter'
  20.     }
  21. }

因此你可以简化成这样：

  1. avalon.effect('animate', {})

注册完，我们就需要在样式表中添加真正的CSS类。

  1. <style>
  2.     .animate-enter, .animate-leave{
  3.         width:100px;
  4.         height:100px;
  5.         background: #29b6f6;
  6.         transition: width 2s;
  7.         -moz-transition: width 2s; /* Firefox 4 */
  8.         -webkit-transition: width 2s; /* Safari 和 Chrome */
  9.         -o-transition: width 2s; /* Opera */
  10.     }
  11.     .animate-enter-active, .animate-leave{
  12.         width:300px;
  13.     }
  14.     .animate-leave-active{
  15.         width:100px;
  16.     }
  17. </style>

我们还得定义一个vm，里面指明动画的动作（默认有三种方式, enter, leave, move）及动画结束时的回调（这是可选的）

  1. var vm = avalon.define({
  2.     $id: 'effect',
  3.     aaa: "test",
  4.     action: 'enter',
  5.     enterCb: function(){
  6.         avalon.log('动画完成')
  7.     },
  8.     leaveCb: function(){
  9.         avalon.log('动画回到原点')
  10.     }
  11. })

然后页面上这样使用：

  1. <div ms-controller='effect' >
  2.     <div ms-effect="{is:'animate', action:@action,onEnterDone: @enterCb,onLeaveDone: @leaveCb}">
  3.         {{@aaa}}
  4.     </div>
  5.     <button ms-click='@action = @action !== "leave" ? "leave": "enter"'
  6.             type="button">click</button>
  7. </div>

ms-effect的值为一个对象，其中is是必选。除了action, 还支持这么多种回调：

onEnterDone, onLeaveDone, onEnterAbort, onLeaveAbort, onBeforeEnter, onBeforeLeave

如果使用JS实现，则是这样的：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>TODO supply a title</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <script src="../dist/avalon.js"></script>
  8.         <script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
  9.         <style>
  10.             .ani{
  11.                width:100px;
  12.                height:100px;
  13.                background: #29b6f6;
  14.             }
  15.         </style>
  16.         <script>
  17.             avalon.effect('animate', {
  18.                enter: function(el, done){
  19.                    $(el).animate({width: 300},1000,done)
  20.                },
  21.                leave: function(el, done){
  22.                    $(el).animate({width: 100},1000,done)
  23.                }
  24.             })
  25.             var vm = avalon.define({
  26.                 $id: 'effect',
  27.                 aaa: "test",
  28.                 action: 'enter',
  29.                 enterCb: function(){
  30.                     avalon.log('动画完成')
  31.                 },
  32.                 leaveCb: function(){
  33.                     avalon.log('动画回到原点')
  34.                 }
  35.             })
  37.         </script>
  38.     </head>
  39.     <body>
  40.         <div ms-controller='effect' >
  41.             <div class='ani' ms-effect="{is:'animate', action:@action,onEnterDone: @enterCb,onLeaveDone: @leaveCb}">
  42.                 {{@aaa}}
  43.             </div>
  44.             <button ms-click='@action = @action !== "leave" ? "leave": "enter"'
  45.                     type="button">click</button>
  46.         </div>
  47.     </body>
  48. </html>

一个CSS3位置效果

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>TODO supply a title</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <script src="../dist/avalon.js"></script>
  8.         <script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
  9.         <style>
  10.            .ani{
  11.                 width:100px;
  12.                 height:100px;
  13.                 background: #ff6e6e;
  14.             }
  15.             .wave-enter, .wave-leave {
  16.                 -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  17.                 -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  18.                 -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  19.                 transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  20.             }
  22.             .wave-enter {
  23.                 position:absolute;
  24.                 left:45%;
  25.             }
  27.             .wave-enter-active {
  28.                 left:0;
  29.             }
  31.             .wave-leave {
  32.                 position:absolute;
  33.                 left:0;
  34.             }
  36.             .wave-leave-active {
  37.                 left:45%;
  38.             }
  40.         </style>
  41.         <script>
  42.             avalon.effect('wave', {})
  43.             var vm = avalon.define({
  44.                 $id: 'effect',
  45.                 action: 'enter',
  46.                 enterCb: function () {
  47.                     avalon.log('动画完成')
  48.                 },
  49.                 leaveCb: function () {
  50.                     avalon.log('动画回到原点')
  51.                 }
  52.             })
  54.         </script>
  55.     </head>
  56.     <body>
  57.         <div ms-controller='effect' >
  58.             <div class='ani' ms-effect="{is:'wave', action:@action,onEnterDone: @enterCb,onLeaveDone: @leaveCb}">
  59.                 <button ms-click='@action = @action !== "leave" ? "leave": "enter"'
  60.                         type="button">click</button>
  61.             </div>
  63.         </div>
  64.     </body>
  65. </html>

ms-widget+ms-for+ms-if+ms-effect的组合动画效果！

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>ms-if</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width">
  7.         <script src="../dist/avalon.js"></script>
  8.         <script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
  9.         <style>
  10.             .ani{
  11.                 width:100px;
  12.                 height:100px;
  13.                 background: #ff6e6e;
  14.             }
  15.         </style>
  16.         <script >
  17.             avalon.component('ms-button', {
  18.                 template: '<button type="button"><span><slot name="buttonText"></slot></span></button>',
  19.                 defaults: {
  20.                     buttonText: "button"
  21.                 },
  22.                 soleSlot: 'buttonText'
  23.             })
  24.             avalon.effect('zoom', {
  25.                 enter: function (el, done) {
  27.                     $(el).css({width: 0, height: 0}).animate({
  28.                         width: 100, height: 100
  29.                     }, 1000, done)
  30.                 },
  31.                 leave: function (el, done) {
  32.                     $(el).animate({
  33.                         width: 0, height: 0
  34.                     }, 1000, done)
  35.                 }
  36.             })
  37.             var vm = avalon.define({
  38.                 $id: "test",
  39.                 arr: [1,2,3],
  40.                 aaa: 222,
  41.                 toggle: true
  42.             })
  44.         </script>
  46.     </head>
  47.     <body ms-controller="test" >
  48.         <div ms-for="el in @arr">
  49.         <div class='ani'
  50.              ms-attr="{eee:el}"
  51.              ms-if="@toggle"
  52.              ms-widget='{is:"ms-button"}'
  53.              ms-effect="{is:'zoom'}">{{@aaa}}::{{el}}</div>
  54.         </div>
  55.     </body>
  56. </html>

最后看一下ms-for与stagger的动画效果。这次为了与angular一次，stagger应该为一个小数，它会让当前元素延迟stagger秒执行。

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <script src="../dist/avalon.js"></script>
  8.     <style>
  9.         .my-repeat-animation {
  10.             width: 400px;
  11.             height: 30px;
  12.             -webkit-animation-duration: 1s;
  13.             animation-duration: 1s;
  14.         }
  16.         .ng-enter {
  17.             -webkit-animation-name: enter_animation;
  18.             animation-name: enter_animation;
  19.         }
  20.         .ng-enter-stagger {
  21.            animation-delay:300ms;
  22.            -webkit-animation-delay:300ms;
  23.         }
  24.         .ng-leave {
  25.             -webkit-animation-name: leave_animation;
  26.             animation-name: leave_animation;
  27.         }
  29.         @keyframes enter_animation {
  30.             0% {
  31.                 opacity: 0;
  32.             }
  33.             100% {
  34.                 opacity: 1;
  35.             }
  36.         }
  38.         @keyframes leave_animation {
  39.             from {
  40.                 opacity: 1;
  41.             }
  42.             to {
  43.                 opacity: 0;
  44.             }
  45.         }
  47.         @-webkit-keyframes enter_animation {
  48.             from {
  49.                 opacity: 0;
  50.             }
  51.             to {
  52.                 opacity: 1;
  53.             }
  54.         }
  56.         @-webkit-keyframes leave_animation {
  57.             from {
  58.                 opacity: 1;
  59.             }
  60.             to {
  61.                 opacity: 0;
  62.             }
  63.         }
  64.     </style>
  65.     <script>
  66.         avalon.effect("my-repeat-animation", {
  67.             enterClass: "ng-enter",
  68.             leaveClass: "ng-leave"
  69.         })
  70.         var vm = avalon.define({
  71.             $id: "test",
  72.             array: [1, 2, 3, 4],
  73.             getBg: function() {
  74.                 return '#' + Math.floor(Math.random() * 16777215).toString(16);
  75.             },
  76.             add: function() {
  77.                 vm.array.push(vm.array.length + 1)
  78.                 vm.array.push(vm.array.length + 1)
  79.                 vm.array.push(vm.array.length + 1)
  80.                 vm.array.push(vm.array.length + 1)
  81.                 vm.array.push(vm.array.length + 1)
  82.                 vm.array.push(vm.array.length + 1)
  83.                 vm.array.push(vm.array.length + 1)
  84.                 vm.array.push(vm.array.length + 1)
  85.                 vm.array.push(vm.array.length + 1)
  86.             },
  87.             value: ""
  88.         })
  89.         vm.$watch("value", function(a) {
  90.             if (a) {
  91.                 vm.array.removeAll(function(el) {
  92.                     return el !== a
  93.                 })
  94.             } else {
  95.                 if(vm.array.length < 12)
  96.                   vm.add()
  97.             }
  98.         })
  99.     </script>
  100. </head>
  102. <body ms-controller="test">
  103.     <button ms-click="@add">Add</button>
  104.     <input placeholder="只保留" ms-duplex-number="@value" />
  105.     <div class="my-repeat-animation"  ms-for="item in @array"
  106.          ms-css="{background:@getBg()}"
  107.          ms-effect="{is:'my-repeat-animation',stagger:0.3}">
  108.         {{item}}
  109.     </div>
  110. </body>
  112. </html>

目前，avalon的ms-effect可以与ms-visible,ms-if,ms-repeat连用。ms-effect也可以单独或与其他指令使用，这时需要你指定action。

  1. <div ms-effect="{is:"effectName", action: @action}">

avalon2学习教程14动画使用的更多相关文章

  1. avalon2学习教程06样式操作

    avalon2的ms-css的变革思路与ms-attr一样,将多个操作合并成到一个对象里面处理,因此没有ms-css-name="value",只有ms-css="Obj ...

  2. avalon2学习教程09循环操作

    avalon2的循环指令的用法完全改变了.avalon最早期从knockout那样抄来ms-each,ms-with,分别用于数组循环与对象循环.它们都是针对元素内容进行循环.后来又从angular那 ...

  3. avalon2学习教程15指令总结

    avalon的指令在上一节已经全部介绍完毕,当然有的语焉不详,如ms-js.本节主要总结我对这方面的思考与探索. MVVM的成功很大一语分是来自于其指令,或叫绑定.让操作视图的功能交由形形式式的指令来 ...

  4. avalon2学习教程13组件使用

    avalon2最引以为豪的东西是,终于有一套强大的类Web Component的组件系统.这个组件系统媲美于React的JSX,并且能更好地控制子组件的传参. avalon自诞生以来,就一直探索如何优 ...

  5. avalon2学习教程12数据验证

    avalon2砍掉了不少功能(如ms-include,ms-data),腾出空间加了其他更有用的功能.数据验证就是其中之一.现在avalon2内置的验证指令是参考之前的oniui验证框架与jquery ...

  6. avalon2学习教程08插入移除操作

    本节介绍的ms-if指令与ms-visible很相似,都是让某元素"看不见",不同的是ms-visible是通过CSS实现,ms-if是通过移除插入节点实现. ms-if的用法与1 ...

  7. avalon2学习教程05属性操作

    avalon2与avalon1的属性操作虽然都是使用ms-attr,但用法完全不一样. avalon1是这样操作属性的 其语法为 ms-attr-valueName="vmProp" ...

  8. avalon2学习教程 03数据填充

    数据填充是一个模版最基础的功能,直接从JSON(vm)取出数据,放到适当的位置上.在静态模板中,不区分文本与HTML,只看你的字符串是否有< >来决定生成文本节点与元素节点.但MVVM中, ...

  9. avalon2学习教程02之vm

    avalon2的vm是一个非常重要的东西,其设计原型最初脱胎于knockout.js,但到avalon1.6中,终于寻得自己的方案,更精简,更易用,更魔幻. vm是一种特殊的数据结构,看起来像普通对象 ...

随机推荐

  1. 解决 Redis Cluster 扩容故障

    双11啦,为了给商品详细redis进行扩容,扩容动作就放在了今天晚上进行,很不巧,今天晚上是个多事之秋: 做了次数据恢复,做了次集群迁移,在迁移的时候还踩了个坑! 集群中有个节点挂掉了,并且报错信息如 ...

  2. YUSE_DOWN-批下载

    *&---------------------------------------------------------------------**& Report YTST_CX_DO ...

  3. dataWithContentsOfURL报错问题

    NSError *error = nil; NSData* videoData = [NSData dataWithContentsOfURL:[NSURL URLWithString:self.re ...

  4. macos下sed小试

    linux下替换是这么干的 sed -i "s/xxxxxxxxxx/video_capture_module/g" project.pbxproj 但是macos下略有不同,照搬 ...

  5. 51nod-1732 婚姻介绍所（后缀数组）

    题目大意:回答任意两个子串的最长公共前缀. 题目分析:后缀数组的模板题.但是输入输出都要外挂. 代码如下: # include<iostream> # include<cstdio& ...

  6. webStorm破解说明

    在idea里转一个 -> 注册时选择License server,填http://idea.lanyus.com

  7. SPOJ QTREE Query on a tree

    题意:给一颗n个点的树,有两种操作CHANGE i ti : 把第i条边的权变为tiQUERY a b : 问点a 到 点b 之间的边的最大权 思路:树剖处理边权.由于是边,所以只需要把边权处理到子节 ...

  8. ABBYY如何使用电子邮件发送OCR结果

    ABBYY FineReader作为一款OCR图文识别软件,在识别文档之后,可以以任何受支持的格式(除HTML外),通过电子邮件发送识别结果,不仅可以发送文档,还可以发送页面图像,本文将为大家讲解如何 ...

  9. .net中常用的几种页面间传递参数的方法

    转自:http://www.cnblogs.com/lxshanye/archive/2013/04/11/3014207.html 参考:http://www.cnblogs.com/zhangka ...

  10. Python Mysql 篇

    Python 操作 Mysql 模块的安装 linux: yum install MySQL-python window: http://files.cnblogs.com/files/wupeiqi ...