ms-effect拥有这三种绑定形式:
<p ms-effect="[@configObj,{is:'fade'}">属性值为字面量,其中一个对象必须包括is属性,这用于指定特效名</p> <p ms-effect="{is:fade, stagger:300}">属性值为对象字面量, 里面拥有is属性</p> <p ms-effect="@fadeConfig">属性值为vm的对象,里面拥有is属性</p>
avalon2实际上没有实现完整的动画模块，它只是对现有的CSS3动画或jquery animate再包装一层。
我们先说如何用CSS3为avalon实现动画效果。首先要使用avalon.effect注册一个特效。
avalon.effect(name, definition)
css3动画要求我们至少添加4个类名。这个是从angular那里学过来的。因此如何你以前的项目是基于angular，它那些CSS动画类可以原封不动地搬过来用。
avalon.effect('animate', { enterClass: 'animate-enter', enterActiveClass: 'animate-enter-active', leaveClass: 'animate-leave', leaveActiveClass: 'animate-leave-active', })
当然，这些类名会默认帮你添加，因为它内部是这样实现的。
avalon.effect = function (name, opts) { var definition = avalon.effects[name] = (opts || {}) if (support.css && definition.css !== false) {`在这里插入代码片` patchObject(definition, 'enterClass', name + '-enter') patchObject(definition, 'enterActiveClass', definition.enterClass + '-active') patchObject(definition, 'leaveClass', name + '-leave') patchObject(definition, 'leaveActiveClass', definition.leaveClass + '-active') } patchObject(definition, 'action', 'enter') } function patchObject(obj, name, value) { if (!obj[name]) { obj[name] = value } }
因此你可以简化成这样：
avalon.effect('animate', {}) avalon.effect('animate')
definition配置对象css如果等于false,那么它会强制使用JS方式
注册完，我们就需要在样式表中添加真正的CSS类。
.animate-enter, .animate-leave{ width:100px; height:100px; background: #29b6f6; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ } .animate-enter-active, .animate-leave{ width:300px; } .animate-leave-active{ width:100px; }
我们还得定义一个vm，里面指明动画的动作（默认有三种方式, enter, leave, move） 及动画结束时的回调（这是可选的）
var vm = avalon.define({ $id: 'effect', aaa: "test", action: 'enter', enterCb: function(){ avalon.log('动画完成') }, leaveCb: function(){ avalon.log('动画回到原点') } })
然后页面上这样使用：
<div ms-controller='effect' > <div ms-effect="{is:'animate', action:@action,onEnterDone: @enterCb,onLeaveDone: @leaveCb}"> {{@aaa}} </div> <button ms-click='@action = @action !== "leave" ? "leave": "enter"' type="button">click</button> </div>
ms-effect的值为一个对象，其中is是必选。除了action, 还支持这么多种回调：
onEnterDone, onLeaveDone, onEnterAbort, onLeaveAbort, onBeforeEnter, onBeforeLeave
