這節我們討論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
我們以後會講。