anim-node-plugin 通过将 Anim 耦合到 Node/NodeList 上,让用户能更简单快捷的调用。

animate Node animate( props, duration, easing, callback )

直接看范例:


KISSY.ready(function(S) {
    S.one('#test-btn').on('click', function() {
        S.all('.test').animate('left: 800px', 5, 'elasticOut');
    });
});

点击 #test-btn 时,就为所有 .test 元素添加了动画效果。

在 animate 基础上,我们封装好了一些常用的动画函数(如下)以便开发者快速使用。

show Node show( speed, callback )

渐变的显示出来。


KISSY.ready(function(S) {
    S.one('.test').show(5, function(){
        alert('you can see me!');
    });
});

hide Node hide( speed, callback )

渐变的隐藏。

toggle Node toggle( speed, callback )

显示/隐藏间的切换。

fadeIn Node fadeIn( speed, callback )

淡入效果。

fadeOut Node fadeOut( speed, callback )

淡出效果。

slideDown Node slideDown( speed, callback )

slideDown效果。

slideUp Node slideUp( speed, callback )

slideUp效果。

没错,一切就这么简单!

homeanim › anim-node-plugin :