1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| <html>
<head>
<title>Dojo example</title>
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: false"></script>
<script type="text/javascript">
//Note that you have to require "dojo.fx" to use the wipe methods.
//These are not included in the base.
dojo.require("dojo.fx");
dojo.require("dijit.form.button");
//on déclare les variables et les affecte plus loin
var wipeOut,wipeIn, currentAnimation;
function doAnimation(index) {
switch(index) {
case 1:
currentAnimation = wipeOut;
break;
case 2:
currentAnimation = wipeIn;
break;
case 3:
//Chain two animations to run in sequence.
//Note the array passed as an argument.
currentAnimation = dojo.fx.chain([wipeOut, wipeIn, wipeOut, wipeIn]);
break;
}
//Play the animation. Without this call, it will not run.
currentAnimation.play();
}
function pauseAnimation(){
if(currentAnimation && currentAnimation.status() == "playing"){
currentAnimation.pause();
}
}
function resumeAnimation(){
if(currentAnimation && currentAnimation.status() == "paused"){
currentAnimation.play();
}
}
//tout est chargé (page, dojo, ...) on peut affecter nos variables en faisant référence au DOM
dojo.addOnLoad(function() {
wipeOut = dojo.fx.wipeOut({node: "animDiv",duration: 1000});
wipeIn = dojo.fx.wipeIn({node: "animDiv",duration: 1000});
});
</script>
<style type="text/css">
.box {
margin-top: 10px;
color: #292929;
width: 300px;
border: 1px solid #BABABA;
background-color: #ddd;
padding-left: 10px;
padding-right: 10px;
margin-left: 10px;
margin-bottom: 1em;
-o-border-radius: 10px;
-moz-border-radius: 12px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px 7px #adadad;
border-radius: 10px;
-moz-box-sizing: border-box;
-opera-sizing: border-box;
-webkit-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
</style>
</head>
<body>
<button dojoType="dijit.form.Button" onClick="doAnimation(1);">Wipe Out</button>
<button dojoType="dijit.form.Button" onClick="doAnimation(2);">Wipe In</button>
<button dojoType="dijit.form.Button" onClick="doAnimation(3);">Wipe Out Then In</button>
<br/>
<button dojoType="dijit.form.Button" onClick="pauseAnimation(2);">Pause</button>
<button dojoType="dijit.form.Button" onClick="resumeAnimation(2);">Resume</button>
<div id="animDiv" class="box">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum
magna. Sed vitae risus.
</p>
</div>
</body>
</html> |
