Dojo------DOM基础之DOM特效

使用dojo 提供的标准特效，我们能创建平滑的用户的体验，

使用dojo/_base/fx 和 dojo/fx模块，能组合一些动态特效

Dojo 1.10有两个fx模块：

dojo/_base/fx：在以前的dojo提供了基础特效方法，包括： animateProperty, anim, fadeIn, 和 fadeout

dojo/fx：提供了许多高级特效，包括：chain, combine, wipeIn, wipeOut 和 slideTo

一、   Fading

平滑的显示和隐藏元素，使节点淡入淡出。

<button id="fadeOutButton">Fade block out</button>
<button id="fadeInButton">Fade block in</button>

<div id="fadeTarget" class="red-block">
    A red block
</div>
<script>
    require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
        var fadeOutButton = dom.byId("fadeOutButton"),
            fadeInButton = dom.byId("fadeInButton"),
            fadeTarget = dom.byId("fadeTarget");

        on(fadeOutButton, "click", function(evt){
            fx.fadeOut({ node: fadeTarget }).play();
        });
        on(fadeInButton, "click", function(evt){
            fx.fadeIn({ node: fadeTarget }).play();
        });
    });
</script>

 

所有的动画函数都只有一个参数：一个包含属性的对象。

最重要的属性是node，是一个DOM节点或节点字符串id，

另一个属性是duration，表示动画持续多久，用毫秒指定，默认为350毫秒

返回值：dojo/_base/fx::Animation对象，这个对象有几个方法：

play, pause, stop, status, gotoPercent.

动画创建后必须调用play方法来启动

二、Wiping

在页面创建下拉折叠的效果

<button id="wipeOutButton">Wipe block out</button>
<button id="wipeInButton">Wipe block in</button>

<div id="wipeTarget" class="red-block wipe">
    A red block
</div>
<script>
    require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
        var wipeOutButton = dom.byId("wipeOutButton"),
            wipeInButton = dom.byId("wipeInButton"),
            wipeTarget = dom.byId("wipeTarget");

        on(wipeOutButton, "click", function(evt){
            fx.wipeOut({ node: wipeTarget }).play();
        });
        on(wipeInButton, "click", function(evt){
            fx.wipeIn({ node: wipeTarget }).play();
        });
    });
</script>

 

我们添加了wipe 类到目标节点上，因为wipe函数操作在一个节点内容的高度上，而不是一个定义的高度，我们的wipe类设置目标节点的高度为auto

三、Sliding

fx.slideTo创建了一个平滑的动画，移动到像素指定的top和left坐标位置

<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>

<div id="slideTarget" class="red-block slide">
    A red block
</div>
<script>
    require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
        var slideAwayButton = dom.byId("slideAwayButton"),
            slideBackButton = dom.byId("slideBackButton"),
            slideTarget = dom.byId("slideTarget");

        on(slideAwayButton, "click", function(evt){
            fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();
        });
        on(slideBackButton, "click", function(evt){
            fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();
        });
    });
</script>

 

四、Animation Events

所有的动画方法都返回一个dojo/_base/fx::Animation对象，这个对象不仅提供了play或pause来控制动画，也提供了一套我们来监听的事件，可以再动画前，动画中，动画后执行一些方法，最重要和常用的事件处理器是beforeBegin 和 onEnd:

<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>

<div id="slideTarget" class="red-block slide">
    A red block
</div>
<script>
    require(["dojo/fx", "dojo/on", "dojo/dom-style", "dojo/dom", "dojo/domReady!"], function(fx, on, style, dom) {

        var slideAwayButton = dom.byId("slideAwayButton"),
            slideBackButton = dom.byId("slideBackButton"),
            slideTarget = dom.byId("slideTarget");

            on(slideAwayButton, "click", function(evt){
                // Note that we're specifying the beforeBegin as a property of the animation
                // rather than using connect. This ensures that our beforeBegin handler
                // executes before any others.
                var anim = fx.slideTo({
                    node: slideTarget,
                    left: "200",
                    top: "200",
                    beforeBegin: function(){

                        console.warn("slide target is: ", slideTarget);

                        style.set(slideTarget, {
                            left: "0px",
                            top: "100px"
                        });
                    }
                });

                // We could have also specified onEnd above alongside beforeBegin,
                // but it's just as easy to connect like so
                on(anim, "End", function(){
                    style.set(slideTarget, {
                        backgroundColor: "blue"
                    });
                }, true);

                // Don't forget to actually start the animation!
                anim.play();
            });

            on(slideBackButton, "click", function(evt){
                var anim = fx.slideTo({
                    node: slideTarget,
                    left: "0",
                    top: "100",
                    beforeBegin: function(){

                        style.set(slideTarget, {
                            left: "200px",
                            top: "200px"
                        });
                    }
                });

                on(anim, "End", function(){
                    style.set(slideTarget, {
                        backgroundColor: "red"
                    });
                }, true);

                anim.play();
            });
    });
</script>

 

五、Chaining

按照顺序触发动画，使用fx.chain一个接一个的播放动画

<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>

<div id="slideTarget" class="red-block slide chain">
    A red block
</div>
<script>
    require(["dojo/_base/fx", "dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(baseFx, fx, on, dom) {

        var slideAwayButton = dom.byId("slideAwayButton"),
            slideBackButton = dom.byId("slideBackButton"),
            slideTarget = dom.byId("slideTarget");

        // Set up a couple of click handlers to run our chained animations
        on(slideAwayButton, "click", function(evt){
            fx.chain([
                baseFx.fadeIn({ node: slideTarget }),
                fx.slideTo({ node: slideTarget, left: "200", top: "200" }),
                baseFx.fadeOut({ node: slideTarget })
            ]).play();
        });
        on(slideBackButton, "click", function(evt){
            fx.chain([
                baseFx.fadeIn({ node: slideTarget }),
                fx.slideTo({ node: slideTarget, left: "0", top: "100" }),
                baseFx.fadeOut({ node: slideTarget })
            ]).play();
        });
    });
</script>

 

我们调用fx.chain直接在一行上创建了许多特性，调用play返回dojo/_base/fx::Animation启动链式动画。

六、Combining

同时启动多个动画，最长时间的动画完成后返回的dojo/_base/fx::Animation将会触发onEnd事件

<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>

<div id="slideTarget" class="red-block slide chain">
    A red block
</div>
<script>
    require(["dojo/_base/fx", "dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(baseFx, fx, on, dom) {

        var slideAwayButton = dom.byId("slideAwayButton"),
            slideBackButton = dom.byId("slideBackButton"),
            slideTarget = dom.byId("slideTarget");

        // Set up a couple of click handlers to run our combined animations
        on(slideAwayButton, "click", function(evt){
            fx.combine([
                baseFx.fadeIn({ node: slideTarget }),
                fx.slideTo({ node: slideTarget, left: "200", top: "200" })
            ]).play();
        });
        on(slideBackButton, "click", function(evt){
            fx.combine([
                fx.slideTo({ node: slideTarget, left: "0", top: "100" }),
                baseFx.fadeOut({ node: slideTarget })
            ]).play();
        });
    });
</script>