JS动画

Animate会在动画过程中，触发以下事件：

1. a:enterStart 元素进入时触发
2. a:enter 元素进入过程中触发
3. a:enterEnd 元素进入结束时触发
4. a:leaveStart 元素离开时触发
5. a:leave 元素离开过程中触发
6. a:leaveEnd 元素离开结束时触发

其中，事件回调函数为：

1. a:enterStart & a:enterEnd & a:leaveStart & a:leaveEnd事件的回调：callback(element)

   • element为进行动画的DOM元素

2. a:enter & a:leave事件回调：callback(element, done)

   • element为进行动画的DOM元素
   • done动画结束回调函数，该函数调用后，会触发相应的end事件

一个使用jQuery动画的例子

<div>
    <button
        ev-click={self.set.bind(self, 'show', !self.get('show'))}
    >展示或隐藏</button>
    <Animate v-if={self.get('show')}
        ev-a:enterStart={self.enterStart.bind(self)}
        ev-a:enter={self.enter.bind(self)}
        ev-a:leave={self.leave.bind(self)}
        a:transition="none"
    >show</Animate>
</div>

Intact.extend({
    template: template,

    enterStart: function(el) {
        $(el).css({
            opacity: 0,
            marginLeft: '10px'
        });
    },

    enter: function(el, done) {
        $(el).stop(true, true).animate({
            opacity: 1,
            marginLeft: 0 
        }, {
            complete: done
        });
    },

    leave: function(el, done) {
        $(el).stop(true,true).animate({
            opacity: 0,
            marginLeft: '10px'
        }, {
            complete: done
        });
    }
});