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代码：

<divclass="box"id="anim_show">show/hide 动画</div>

<divid="demo_show"></div>

<divclass="box"id="anim_slide">slideUp/slideDown 动画</div>

<divid="demo_slide"></div>

<divclass="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)效果图：