【Dojo学习之五】强大的动画效果

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>

【Dojo学习之五】强大的动画效果

相关推荐