avalon2学习教程14动画使用

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

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

avalon.effect(name, definition)

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

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, definition) {
    avalon.effects[name] = definition
    if (support.css) {
        if (!definition.enterClass) {
            definition.enterClass = name + '-enter'
        }
        if (!definition.enterActiveClass) {
            definition.enterActiveClass = definition.enterClass + '-active'
        }
        if (!definition.leaveClass) {
            definition.leaveClass = name + '-leave'
        }
        if (!definition.leaveActiveClass) {
            definition.leaveActiveClass = definition.leaveClass + '-active'
        }

    }
    if (!definition.action) {
        definition.action = 'enter'
    }
}

因此你可以简化成这样：

avalon.effect('animate', {})

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

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

var vm = avalon.define({
    $id: 'effect',
    aaa: "test",
    action: 'enter',
    enterCb: function(){
        avalon.log('动画完成')
    },
    leaveCb: function(){
        avalon.log('动画回到原点')
    }
})

然后页面上这样使用：

    

        {{@aaa}}
    
    click

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

onEnterDone, onLeaveDone, onEnterAbort, onLeaveAbort, onBeforeEnter, onBeforeLeave

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

    
        
        
        
        
        
        
        
    
    
        

            

                {{@aaa}}
            
            click
        
    

一个CSS3位置效果

    
        
        
        
        
        
        
        
    
    
        

            

                click
            

        
    

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

    
        
        
        
        
        
        
        

    
    
        

        
{{@aaa}}::{{el}}
        
    

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

 

    
    
    
    
    

 

    Add
    
    

        {{item}}
    

 

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