动画绑定

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

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

    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. })

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

    3. avalon.effect = function (name, opts) {
    4.     var definition = avalon.effects[name] = (opts || {})
    5.     if (support.css && definition.css !== false) {
    6.         patchObject(definition, 'enterClass', name + '-enter')
    7.         patchObject(definition, 'enterActiveClass', definition.enterClass + '-active')
    8.         patchObject(definition, 'leaveClass', name + '-leave')
    9.         patchObject(definition, 'leaveActiveClass', definition.leaveClass + '-active')
    11.     }
    12.     patchObject(definition, 'action', 'enter')
    14. }
    15. function patchObject(obj, name, value) {
    16.     if (!obj[name]) {
    17.         obj[name] = value
    18.     }
    19. }
    1. avalon.effect('animate', {})
    2. avalon.effect('animate')

    definition配置对象css如果等于false,那么它会强制使用JS方式

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

    我们还得定义一个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, 还支持这么多种回调：

    1. 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: "effect",
    28.                 action: 'enter',
    29.                 enterCb: function(){
    30.                     avalon.log('动画完成')
    31.                 },
    32.                 leaveCb: function(){
    33.                     avalon.log('动画回到原点')
    34.                 }
    35.             })
    38.         </script>
    39.     </head>
    40.     <body>
    41.         <div ms-controller='effect' >
    42.             <div class='ani' ms-effect="{is:'animate', action:@action,onEnterDone: @enterCb,onLeaveDone: @leaveCb}">
    43.                 {{@aaa}}
    44.             </div>
    45.             <button ms-click='@action = @action !== "leave" ? "leave": "enter"'
    46.                     type="button">click</button>
    47.         </div>
    48.     </body>
    49. </html>

    一个CSS3位置效果

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <meta name="format-detection" content="telephone=no">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    7.         <style>
    8.             .animate-enter, .animate-leave{
    10.                 background: #29b6f6;
    11.                 transition: width 2s;
    12.                 -moz-transition: width 2s; /* Firefox 4 */
    13.                 -webkit-transition: width 2s; /* Safari 和 Chrome */
    14.                 -o-transition: width 2s; /* Opera */
    15.             }  
    16.             .animate-enter-active, .animate-leave{
    17.                 width:300px;
    18.             }
    19.             .animate-leave-active{
    20.                 width:100px;
    21.             }
    22.         </style>
    23.         <title></title>
    24.     </head>
    25.     <body ms-controller="body">
    26.         <button ms-click="@toggle">toggle</button>
    27.         <div ms-effect="{is : 'animate',action: @action}"></div>
    28.         <script src="../../dist/avalon.js"></script>
    29.         <script>
    30.             avalon.effect("animate",{
    31.                 onEnterDone: function(){
    32.                    avalon.log('enter done')
    33.                 },
    34.                 onLeaveDone: function(){
    35.                    avalon.log('leave done')
    36.                 }
    37.             });
    39.           var vm =  avalon.define({
    40.                 $id : "body",
    41.                 action: 'enter',
    42.                 toggle : function(){
    43.                     vm.action = vm.action === 'enter' ? 'leave' : 'enter'
    44.                     avalon.log('toggle', vm.action)
    45.                 }
    46.             });
    47.         </script>
    48.     </body>
    49. </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: "effect1",
    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.         <button ms-click="@toggle = !@toggle " >点我 </button >
    56.     </body>
    57. </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">
    8.         .my-repeat-animation {
    9.             width: 400px;
    10.             height: 30px;
    11.             -webkit-animation-duration: 1s;
    12.             animation-duration: 1s;
    13.         }
    15.         .ng-enter {
    16.             -webkit-animation-name: enter_animation;
    17.             animation-name: enter_animation;
    18.         }
    19.         .ng-enter-stagger {
    20.            animation-delay:300ms;
    21.            -webkit-animation-delay:300ms;
    22.         }
    23.         .ng-leave {
    24.             -webkit-animation-name: leave_animation;
    25.             animation-name: leave_animation;
    26.         }
    28.         @keyframes enter_animation {
    29.             0% {
    30.                 opacity: 0;
    31.             }
    32.             100% {
    33.                 opacity: 1;
    34.             }
    35.         }
    37.         @keyframes leave_animation {
    38.             from {
    39.                 opacity: 1;
    40.             }
    41.             to {
    42.                 opacity: 0;
    43.             }
    44.         }
    46.         @-webkit-keyframes enter_animation {
    47.             from {
    48.                 opacity: 0;
    49.             }
    50.             to {
    51.                 opacity: 1;
    52.             }
    53.         }
    55.         @-webkit-keyframes leave_animation {
    56.             from {
    57.                 opacity: 1;
    58.             }
    59.             to {
    60.                 opacity: 0;
    61.             }
    62.         }
    63.     </style>
    64.     <script>
    65.         avalon.effect("my-repeat-animation", {
    66.             enterClass: "ng-enter",
    67.             leaveClass: "ng-leave"
    68.         })
    69.         var vm = avalon.define({
    70.             $id: "test",
    71.             array: [1, 2, 3, 4],
    72.             getBg: function() {
    73.                 return '#' + Math.floor(Math.random() * 16777215).toString(16);
    74.             },
    75.             add: function() {
    76.                 vm.array.push(vm.array.length + 1)
    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.             },
    86.             value: ""
    87.         })
    88.         vm.$watch("value", function(a) {
    89.             if (a) {
    90.                 vm.array.removeAll(function(el) {
    91.                     return el !== a
    92.                 })
    93.             } else {
    94.                 if(vm.array.length < 12)
    95.                   vm.add()
    96.             }
    97.         })
    98.     </script>
    99. </head>
    101. <body ms-controller="test">
    102.     <button ms-click="@add">Add</button>
    103.     <input placeholder="只保留" ms-duplex-number="@value" />
    104.     <div class="my-repeat-animation"  ms-for="item in @array" 
    105.          ms-css="{background:@getBg()}"
    106.          ms-effect="{is:'my-repeat-animation',stagger:0.3}">
    107.         {{item}}
    108.     </div>
    109. </body>