官方教程：Dojo Effects
这里讲学习一下dojo如何实现淡入、淡出、滑动等效果。
实现这些特殊的效果有两个包 dojo/_base/fx 和 dojo/fx。
dojo/_base/fx 中提供了一些基础的animation方法，如： animateProperty, anim, fadeIn, and fadeOut.
dojo/fx 中提供了一些高级的animation方法，如：chain, combine, wipeIn, wipeOut and slideTo。
淡入淡出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();//淡入 }); }); 在所有的方法中包含后面介绍的，都只有一个对象参数，这个对象中可包含多个属性，必不可少的一个属性就是node，为要实现效果的节点对象或id字符串。
在fadeOut/fadeIn方法中还有一个属性duration，持续的时间，默认为350ms。这些animation方法将返回一animation对象，该对象包含一些方法：play, pause, stop, status, and gotoPercent，用来执行，暂停，停止，查看状态及执行到某种程度。
擦除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(); }); });
同淡入淡出一样
滑动
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(); }); });
在slideTo方法的参数中，除了节点对象属性外，还有left和top两个属性，用来设置滑动到目的位置的坐标。
事件
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(); }); });在实现动态效果的过程中会产生两个事件，一个是beforeBegin，在执行之前调用；一个是onEnd，在执行完后调用。
在上面的例子中可以看到，beforeBegin是作为参数对象中的一个方法来定义的；onEnd是作为animation对象的一个事件在on中定义的。
连锁反应
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(); }); });
chain用来将多个animation动作连接起来按顺序执行，它的参数即是由不同animation方法返回的animation对象组成的数组，执行的顺序就是数组的先后顺序。
联合
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(); }); });
combine方法是将多个animation动作联合起来同时执行实现一个完成的动态效果。其参数也是由不同animation方法返回的animation对象组成的数组。
)