KISSY基础篇乄KISSY之Node（2）

KISSY之Node（2）

今日任务：学习Node模块有关动画效果的方法.

在学习Anim模块之前，先看看Node模块里有关动画效果的方法的实现。查看相应的API 文档你会发现一些有关动画效果的方法：

·        show()：当前节点列表元素以动画效果显示。参数：speed (number) – 单位秒, 动画持续时间, 不设置无动画；callback (function) – 每个动画结束后回调函数。

·        hide()：当前节点列表元素以动画效果隐藏。参数如上。

·        toggle()：当前节点列表元素为显示时动画效果隐藏, 否则动画效果显示。参数如上。

 

·        fadeIn()：当前节点列表元素以渐隐效果显示。参数：speed (number) – 单位秒, 动画持续时间, 不设置无动画；callback (function) – 每个动画结束后回调函数。easing(String)–动画平滑函数

·        fadeOut()：当前节点列表元素以渐隐效果隐藏。参数如上。

·        fadeToggle()：当前节点列表元素为显示时, 切换显示或隐藏, 且动画效果为渐隐。参数如上。

 

·        slideUp()：当前节点列表元素从下到上隐藏。参数：speed (number) – 单位秒, 动画持续时间, 不设置无动画；callback (function) – 每个动画结束后回调函数。easing(String)–动画平滑函数

·        slideDown()：当前节点列表元素从上到下滑动显示。参数如上。

·        slideToggle()：当前节点列表元素为显示时, 切换显示或隐藏, 且动画效果为滑动展开折叠。参数如上。

说明：实践时，1.40版本的对以上方法实现室友缺陷的。

toggle：不能有参数和回调函数

slideToggle、fadeToggle ：不可用

·        animate()：在当前节点列表上开始动画。

var node=KISSY.all(".foo");

node.animate(...);

相当于：

KISSY.query(".foo").each(function(n){

    newKISSY.Anim(n,...).run();

});

此方法在下一节向大家介绍。

下面直接上实例：

(1)day-8.html代码：

<div class="box" id="anim_show">show/hide 动画</div> <div id="demo_show"></div> <div class="box" id="anim_slide">slideUp/slideDown 动画</div> <div id="demo_slide"></div> <div class="box" id="anim_fade">fadeIn/fadeOut 动画</div> <div id="demo_fade"></div>

(2)day-8.css代码：

.box {         width: 160px;         height: 160px;         background: #AABBCC;     }

(3)day-8.js代码：

KISSY.use("node,button", function (S, Node, Button) {     var anim_show = Node.one("#anim_show"),         anim_slide = Node.one("#anim_slide"),         anim_fade = Node.one("#anim_fade");     var demo_show = new Button({         content: "show/hide",         render: "#demo_show"     });     demo_show.render();     demo_show.on("click", function () {         anim_show.toggle();     });     var demo_slide = new Button({         content: "show/hide",         render: "#demo_slide"     });     demo_slide.render();     demo_slide.on("click", function () {         if (anim_slide.css("display") === "none") {             anim_slide.slideDown(2,function(){alert("动画已完成！");});         } else {             anim_slide.slideUp(2);         }     });     var demo_fade = new Button({         content: "show/hide",         render: "#demo_fade"     });     demo_fade.render();     demo_fade.on("click", function () {         if (anim_fade.css("display") === "none")             anim_fade.fadeIn(2,function(){alert("动画已完成！");});         else             anim_fade.fadeOut(2);     }); });

(4)效果图：