这节我们讨论dojo的特效，他使我们的页面或应用更活泼。在这里我们将很自在的操纵文档对象模型、处理文档对象模型节点事件。
然而，当我们采取这样的行动时，转变可能会变得很突兀：删除一个节点使他在页面上消失。这有可能迷惑用户。使用dojo提供的标准特效，我们能够提供平滑的用户体验，真正的增加一些亮点到我们的应用上。更进一步，如果我们深入到dojo/_base/fx和dojo/fx模块，我们可以连接和结合这些效果，制造一些真正耀眼、动态的表现。
Dojo 1.7 有两个fx模块
dojo/_base/fx和dojo/fx.
dojo/_base/fx提供基本的效果方法，我们以前在dojo 基础中看到的。
包括：动画属性、动画、淡入和淡出。
dojo/fx 提供更高级的效果，包括连接、合并、划入、划出、滑动到。
淡入淡出
一个你在应用中看到的效果是一个节点的淡入淡出。
这个效果是非常的常见和简单的，他包含在dojo 基础中。
我们可以使用它在页面上显示或隐藏元素以一种平滑和优美的方式。
来看例子。
<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>
所有的动画方法拥有一个参数：一个拥有属性的对象。
其中你将使用的最重要的属性是节点的属性。需要显示动画的DOM节点或者其对应的id字符串。令一个属性是持续时间（duration），设定动画持续的时间。以毫秒表示。默认为350毫秒。对于其他的动画还有其他的属性，但是淡入淡出不需要他们。
动画方法返回一个拥有一些方法的dojo.Animation对象。方法包括：play（开始）, pause（暂停）, stop（停止）, status（状态）, 和 gotoPercent(播放进度)。动画不是在创建完成后就开始的，必须手工的通过play 方法来开始。
擦除效果
你可能看到过的令一个动画效果是擦除效果。是内容显示的同时改变元素的内容。
他产生的效果是好像有人在节点上使用了雨刷一样。通常擦除效果在一个页面上创造折叠效果是很有效的。在那里你有频发访问的内容和设置。或者你只是想要有擦除效果的显示和隐藏。
<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>
擦除效果在dojo/fx模块中，在这个例子中，我们增加了擦除类到了我们的，目标节点。
因为我们的擦除方法操作在节点内容的高度上，而不是一个确切的高度。我们的擦除类设置目标节点的高度为"auto".
滑动
目前为止，我们实现了隐藏效果。但是我们要将他移动到周围一点，要怎么做呢？
淡入淡出或擦除效果并不改变节点的位置。这就是fx.slideTo 的用处。移动一个节点可以在页面上创建运动或表示进度的效果。fx.slideTo为页面上的节点创建平滑的动画。通过改变像素值来改变节点的top和left座标，来讲它移动到周围。
动画事件
如上所述，所有的这些动画方法返回一个dojo.Animation 对象，这些所有的对象不仅仅是控制动画效果的播放与暂停。他也提供一组事件，我们可以监听者些事件。为了在动画之前、之间、之后执行一些动作。两个最重要最常用的是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>
你也许注意到了beforeBegin 作为一个参数对象的属性被传入。
将他传入的最直接的原因是某些对象当创造出是就连接到beforeBegin
如果你在动画创建之后连接到beforeBegin，你的处理器将会在动画的beforeBegin 处理器执行后执行。这一点是你不想要发生的。
通过将你的处理器以参数对象的属性传入。要保证你的处理器被第一个执行。
链接
我们可以使用end事件来连接下一个效果，但那不是很方便。这种模式是最普遍不过了，但是dojo/fx模块给我们一系列便利的方法来建立效果，以序列或者并行的运行。并且每个方法返回一个新的dojo.Animation 对象，拥有自己的一系列方法和事件来代表整个序列。让我们先看看效果，用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>
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();
});
});
正如你在这里所看到的，我们创建了一些效果直接内联到fx.chain的调用。
立即调用play方法在dojo.Animation的返回值上，开始连锁动画。我没不是分别的调用每一个动画，这些由fx.chain为我们处理了。
组合
dojo/fx提供的第二个便利的方法是combine方法，他将开始多个动画在同一时间。
返回的dojo.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>
在这种情况下，不是按顺序的进行淡入和淡出然后划入划出，他们讲同时进行。
使用fx.chain 和 fx.combine你可以建立一些相当精致的动画序列。
这些方法的结果可以被链接和合并。允许你构建从简单的动画到非常丰富和详细的序列。
小结
使用dojo 是非常的容易的向你的页面加入闪光点。
使用dojo/_base/fx和dojo/fx模块，你可以容易的淡入淡出文档对象模型，
使用很小的要求，你可以引入大量的强大的方法去简单和容易的将你的节点移动或者将他们划入划出。你能够链接和组合动画意味着你能够，快速容易的构建一个相当的高级的动画。
然而，如果你想要更高级的，例如调整一个节点的高度，但不必要将他缩短到0，或者通过动画来调整背景色。有更一般的dojo.animateProperty
我们以后会讲。