Dojo的动画效果做的很好，不言语，贴代码！ 1.逐渐消失 !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"htmlheadmeta http-equiv="Content-Type" content="text/html; charset
Dojo的动画效果做的很好，不言语，贴代码！
1.逐渐消失
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>animation</title>
<style type="text/css">
@import "./dojo/dojo/resources/dojo.css";
@import "./dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" djConfig="parseOnLoad: true, isDebug: true" src="./dojo/dojo/dojo.js"></script>
<script type="text/javascript">
//逐渐消失
dojo.addOnLoad(function(){
var animArgs = {
node: "testHeading",
duration: 1000, // ms to run animation
delay: 250 // ms to stall before playing
};
dojo.fadeOut(animArgs).play();
});
</script>
</head>
<body class="tundra">
<h1 id="testHeading">Dojo Skeleton Page</h1>
</body>
</html> 2.文字逐渐变大
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文字逐渐变大</title>
<style type="text/css">
@import "./dojo/dojo/resources/dojo.css";
@import "./dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" djConfig="parseOnLoad: true, isDebug: true" src="./dojo/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.style("testHeading","opacity","0"); // hide it
var anim1 = dojo.fadeOut({ node: "testHeading", duration:700 });
var anim2 = dojo.animateProperty({
node: "testHeading", delay: 1000,
properties:{
// fade back in and make text bigger
opacity: { end: 1 }, fontSize: { end:19, unit:"pt"}
}
});
anim1.play();
anim2.play();
});
</script>
</head>
<body class="tundra">
<h1 id="testHeading">Dojo Skeleton Page</h1>
</body>
</html>
3.精美的文字展示移动消失
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>精美的文字显示移动消失</title>
<style type="text/css">
@import "./dojo/dojo/resources/dojo.css";
@import "./dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" djConfig="parseOnLoad: true, isDebug: true" src="./dojo/dojo/dojo.js"></script>
<script type="text/javascript">
//connect 连接事件
//dojo.addOnLoad(function(){
// var anim = dojo.fadeOut({ node: "testHeading" });
// dojo.connect(anim,"onEnd",function(){
// dojo.byId("testHeading").innerHTML = "replaced after fade!";
// dojo.fadeIn({ node:"testHeading" }).play();
// });
// anim.play();
//});
//没必要用连接属性
dojo.addOnLoad(function(){
var anim = dojo.fadeOut({
node: "testHeading",
onEnd: function(){
dojo.byId("testHeading").innerHTML = "replaced ... ";
dojo.fadeIn({ node: "testHeading" }).play();
}
}).play();
});
</script>
</head>
<body class="tundra">
<h1 id="testHeading">Dojo Skeleton Page</h1>
</body>
</html>