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效果。
没错,一切就这么简单!