使用 Dojo 动画效果

　2010-04-13 00:00:00　来源：WEB开发网　　　

核心提示：在 Web 页面中加入适当的动画效果能够使页面更加生动，提高用户体验，使用 Dojo 动画效果，Dojo 提供了动画效果库，并被加入到核心基础库中，在很多 dijit 和 dojox 控件中都有使用，使用 Dojo 动画效果库可以很方便地创建淡入、淡出、飞入及擦除等可视化效果，广泛用于各种 dijit 和 dojox

在 Web 页面中加入适当的动画效果能够使页面更加生动，提高用户体验。Dojo 提供了动画效果库，并被加入到核心基础库中，广泛用于各种 dijit 和 dojox 控件中。Dojo 的动画效果库采用标准的 JavaScript 和 CSS 实现。本文简要介绍 Dojo 动画效果库的实现原理，然后详细介绍如何使用该库创建淡入、淡出、擦除等动画效果以及如何组合使用这些动画效果。

Dojo 动画效果库简介

Dojo 动画效果库采用标准 JavaScript 语言和 CSS 实现，能够为 HTML 元素增加可视化效果，作为一个 Dojo 基础类库，在很多 dijit 和 dojox 控件中都有使用。使用 Dojo 动画效果库可以很方便地创建淡入、淡出、飞入及擦除等可视化效果，并且可以组合使用这些动画效果实现更为复杂的功能。

下面的例子说明了如何实现一个淡出效果：

清单 1.淡出效果

　<html>　　<head>　　<title>dojo.fx　Demo</title>　　　<script　type="text/javascript"　src="dojo/dojo.js"　djConfig="isDebug:　true">　　　</script>　　　<script　type="text/javascript">　　　dojo.require("dojo.fx");　　　dojo.addOnLoad(function(){　　　var　fadeout　=　dojo.fadeOut({　　　node:　"foo",　　　duration:　1000　　　　});　　　fadeout.play();　　　});　　　</script>　　</head>　　<body>　　　<div　id="foo">　　　This　is　dojo.fx　demo.　　　</div>　　</body>　　</html>　