使用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
平滑的显示和隐藏元素，使节点淡入淡出。
1 <button id="fadeOutButton">Fade block out</button>
2 <button id="fadeInButton">Fade block in</button>
3
4 <div id="fadeTarget" class="red-block">
5 A red block
6 </div>
7 <script>
8 require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
9 var fadeOutButton = dom.byId("fadeOutButton"),
10 fadeInButton = dom.byId("fadeInButton"),
11 fadeTarget = dom.byId("fadeTarget");
12
13 on(fadeOutButton, "click", function(evt){
14 fx.fadeOut({ node: fadeTarget }).play();
15 });
16 on(fadeInButton, "click", function(evt){
17 fx.fadeIn({ node: fadeTarget }).play();
18 });
19 });
20 </script>
所有的动画函数都只有一个参数：一个包含属性的对象。
最重要的属性是node，是一个DOM节点或节点字符串id，
另一个属性是duration，表示动画持续多久，用毫秒指定，默认为350毫秒
返回值：dojo/_base/fx::Animation对象，这个对象有几个方法：
play, pause, stop, status, gotoPercent.
动画创建后必须调用play方法来启动
二、Wiping
在页面创建下拉折叠的效果
1 <button id="wipeOutButton">Wipe block out</button>
2 <button id="wipeInButton">Wipe block in</button>
3
4 <div id="wipeTarget" class="red-block wipe">
5 A red block
6 </div>
7 <script>
8 require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
9 var wipeOutButton = dom.byId("wipeOutButton"),
10 wipeInButton = dom.byId("wipeInButton"),
11 wipeTarget = dom.byId("wipeTarget");
12
13 on(wipeOutButton, "click", function(evt){
14 fx.wipeOut({ node: wipeTarget }).play();
15 });
16 on(wipeInButton, "click", function(evt){
17 fx.wipeIn({ node: wipeTarget }).play();
18 });
19 });
20 </script>
我们添加了wipe 类到目标节点上，因为wipe函数操作在一个节点内容的高度上，而不是一个定义的高度，我们的wipe类设置目标节点的高度为auto
三、Sliding
fx.slideTo创建了一个平滑的动画，移动到像素指定的top和left坐标位置
1 <button id="slideAwayButton">Slide block away</button>
2 <button id="slideBackButton">Slide block back</button>
3
4 <div id="slideTarget" class="red-block slide">
5 A red block
6 </div>
7 <script>
8 require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
9 var slideAwayButton = dom.byId("slideAwayButton"),
10 slideBackButton = dom.byId("slideBackButton"),
11 slideTarget = dom.byId("slideTarget");
12
13 on(slideAwayButton, "click", function(evt){
14 fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();
15 });
16 on(slideBackButton, "click", function(evt){
17 fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();
18 });
19 });
20 </script>
四、Animation Events
所有的动画方法都返回一个dojo/_base/fx::Animation对象，这个对象不仅提供了play或pause来控制动画，也提供了一套我们来监听的事件，可以再动画前，动画中，动画后执行一些方法，最重要和常用的事件处理器是beforeBegin 和 onEnd:
1 <button id="slideAwayButton">Slide block away</button>
2 <button id="slideBackButton">Slide block back</button>
3
4 <div id="slideTarget" class="red-block slide">
5 A red block
6 </div>
7 <script>
8 require(["dojo/fx", "dojo/on", "dojo/dom-style", "dojo/dom", "dojo/domReady!"], function(fx, on, style, dom) {
9
10 var slideAwayButton = dom.byId("slideAwayButton"),
11 slideBackButton = dom.byId("slideBackButton"),
12 slideTarget = dom.byId("slideTarget");
13
14 on(slideAwayButton, "click", function(evt){
15 // Note that we're specifying the beforeBegin as a property of the animation
16 // rather than using connect. This ensures that our beforeBegin handler
17 // executes before any others.
18 var anim = fx.slideTo({
19 node: slideTarget,
20 left: "200",
21 top: "200",
22 beforeBegin: function(){
23
24 console.warn("slide target is: ", slideTarget);
25
26 style.set(slideTarget, {
27 left: "0px",
28 top: "100px"
29 });
30 }
31 });
32
33 // We could have also specified onEnd above alongside beforeBegin,
34 // but it's just as easy to connect like so
35 on(anim, "End", function(){
36 style.set(slideTarget, {
37 backgroundColor: "blue"
38 });
39 }, true);
40
41 // Don't forget to actually start the animation!
42 anim.play();
43 });
44
45 on(slideBackButton, "click", function(evt){
46 var anim = fx.slideTo({
47 node: slideTarget,
48 left: "0",
49 top: "100",
50 beforeBegin: function(){
51
52 style.set(slideTarget, {
53 left: "200px",
54 top: "200px"
55 });
56 }
57 });
58
59 on(anim, "End", function(){
60 style.set(slideTarget, {
61 backgroundColor: "red"
62 });
63 }, true);
64
65 anim.play();
66 });
67 });
68 </script>
五、Chaining
按照顺序触发动画，使用fx.chain一个接一个的播放动画
1 <button id="slideAwayButton">Slide block away</button>
2 <button id="slideBackButton">Slide block back</button>
3
4 <div id="slideTarget" class="red-block slide chain">
5 A red block
6 </div>
7 <script>
8 require(["dojo/_base/fx", "dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(baseFx, fx, on, dom) {
9
10 var slideAwayButton = dom.byId("slideAwayButton"),
11 slideBackButton = dom.byId("slideBackButton"),
12 slideTarget = dom.byId("slideTarget");
13
14 // Set up a couple of click handlers to run our chained animations
15 on(slideAwayButton, "click", function(evt){
16 fx.chain([
17 baseFx.fadeIn({ node: slideTarget }),
18 fx.slideTo({ node: slideTarget, left: "200", top: "200" }),
19 baseFx.fadeOut({ node: slideTarget })
20 ]).play();
21 });
22 on(slideBackButton, "click", function(evt){
23 fx.chain([
24 baseFx.fadeIn({ node: slideTarget }),
25 fx.slideTo({ node: slideTarget, left: "0", top: "100" }),
26 baseFx.fadeOut({ node: slideTarget })
27 ]).play();
28 });
29 });
30 </script>
我们调用fx.chain直接在一行上创建了许多特性，调用play返回dojo/_base/fx::Animation启动链式动画。
六、Combining
同时启动多个动画，最长时间的动画完成后返回的dojo/_base/fx::Animation将会触发onEnd事件
1 <button id="slideAwayButton">Slide block away</button>
2 <button id="slideBackButton">Slide block back</button>
3
4 <div id="slideTarget" class="red-block slide chain">
5 A red block
6 </div>
7 <script>
8 require(["dojo/_base/fx", "dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(baseFx, fx, on, dom) {
9
10 var slideAwayButton = dom.byId("slideAwayButton"),
11 slideBackButton = dom.byId("slideBackButton"),
12 slideTarget = dom.byId("slideTarget");
13
14 // Set up a couple of click handlers to run our combined animations
15 on(slideAwayButton, "click", function(evt){
16 fx.combine([
17 baseFx.fadeIn({ node: slideTarget }),
18 fx.slideTo({ node: slideTarget, left: "200", top: "200" })
19 ]).play();
20 });
21 on(slideBackButton, "click", function(evt){
22 fx.combine([
23 fx.slideTo({ node: slideTarget, left: "0", top: "100" }),
24 baseFx.fadeOut({ node: slideTarget })
25 ]).play();
26 });
27 });
28 </script>
来源：https://www.cnblogs.com/becauseCode/p/5706164.html