动画绑定

ms-effect拥有这三种绑定形式:

  1. <p ms-effect="[@configObj,{is:'fade'}">属性值为字面量,其中一个对象必须包括is属性,这用于指定特效名</p>
  2. <p ms-effect="{is:fade, stagger:300}">属性值为对象字面量, 里面拥有is属性</p>
  3. <p ms-effect="@fadeConfig">属性值为vm的对象,里面拥有is属性</p>

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

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

  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类。

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

我们还得定义一个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

ms-effect - 图1

如果使用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>
  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.             })
  55.         </script>
  56.     </head>
  57.     <body>
  58.         <div ms-controller='effect' >
  59.             <div class='ani' ms-effect="{is:'wave', action:@action,onEnterDone: @enterCb,onLeaveDone: @leaveCb}">
  60.                 <button ms-click='@action = @action !== "leave" ? "leave": "enter"'
  61.                         type="button">click</button>
  62.             </div>
  64.         </div>
  65.     </body>
  66. </html>
  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{
  9.                 width:100px;
  10.                 height:100px;
  11.                 background: #29b6f6;
  12.                 transition: width 2s;
  13.                 -moz-transition: width 2s; /* Firefox 4 */
  14.                 -webkit-transition: width 2s; /* Safari 和 Chrome */
  15.                 -o-transition: width 2s; /* Opera */
  16.             }  
  17.             .animate-enter-active, .animate-leave{
  18.                 width:300px;
  19.             }
  20.             .animate-leave-active{
  21.                 width:100px;
  22.             }
  23.         </style>
  24.         <title></title>
  25.     </head>
  26.     <body ms-controller="body">
  27.         <button ms-click="@toggle">toggle</button>
  28.         <div ms-effect="{is : 'animate',action: @action}"></div>
  29.         <script src="../../dist/avalon.js"></script>
  30.         <script>
  31.             avalon.effect("animate",{
  32.                 onEnterDone: function(){
  33.                    avalon.log('enter done')
  34.                 },
  35.                 onLeaveDone: function(){
  36.                    avalon.log('leave done')
  37.                 }
  38.             });
  40.           var vm =  avalon.define({
  41.                 $id : "body",
  42.                 action: 'enter',
  43.                 toggle : function(){
  44.                     vm.action = vm.action === 'enter' ? 'leave' : 'enter'
  45.                     avalon.log('toggle', vm.action)
  46.                 }
  47.             });
  48.         </script>
  49.     </body>
  50. </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">
  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}">