<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>Dojo里所有的动画特效函数都只接受一个参数对象,该参数对象包含了一系列属性来设定所需动画效果。其中 最重要的属性之一就是 node。 node属性值是一个DOM节点或者是一个DOM 节点的ID (字符串)。 另一个参数 duration,则指定了这个效果的播放要持续的时间,单位是毫秒。如果不指定duration,则默认的播放时间是350毫秒。当然不同的动画效果有不同的参数,不过对于淡入淡出特效而言,这两个参数就足够了。
另一种常见特效是擦除效果: 它实际上是指改变一个节点的高度,而让其内容逐渐显示或者消失。效果有点类似与雨刷在挡风玻璃上划过留下的痕迹。擦除特效可以用于创建页面的下拉效果,尤其是当页面上有一些不常用的内容时。当然你也可能仅仅是觉得擦除比淡出好看。
请看下面的示例代码:
<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>
和fadeIn/fadeOut不同,使用擦除函数需要引用的是dojo/fx包。另一个需要注意的是我们在这个例子里给目标节点“wipeTarget" 增加了一个css类wipe, 这个类设定了节点的height:auto, 这是因为wipeIn函数的效果是从节点的现有高度变化到其自然高度(即height:auto)。
<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>
查看示例
<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){ // 注意beforeBegin是作为Animation对象的参数直接传给slideTo函数的, // 而不是使用connect连接。这保证了我们的逻辑在其他beforeBegin逻辑之前执行。 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" }); } }); // 当然我们也可以像beforeBegin一样把这个处理逻辑以onEnd的名字传给slideTo函数, // 但既然一个简单的connect连接就能解决问题,所以…… //(译者注:这种做法更符合事件的特点,即当事件触发之后才执行用户逻辑) on(anim, "End", function(){ style.set(slideTarget, { backgroundColor: "blue" }); }, true); // 千万别忘了启动这个动画特效! 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 和onEnd (译者注:在使用1.7的新函数on时需要省略事件名前缀的"on",这和addEventListener的用法保持了一致)这两个事件的回调方法的方式不太一样。beforeBegin 的处理方法直接作为参数传递给了slideTo函数。这是因为对某些动画特效beforeBegin处理函数是在对象创建时连接的,如果我们通过on来连接我们的beforeBegin处理函数,则我们的处理函数会在该动画自己的beforeBegin处理函数之后被调用。因此作为参数传入的方法保证了我们的处理函数可以被最先执行。
<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"); // 设置一些click事件处理函数来播放我们的串联动画 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的时候直接传入了一个特效数组,并对该方法所返回的dojo.Animation对象调用了play方法来启动整个特效链。现在我们不需要逐个启动特效了,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");
// 设置一些click事件处理函数来播放我们的组合动画
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>
在这个例子中,淡入和滑动特效并不是依次播放,而是同时发生的。