source: Dev/trunk/src/client/dojox/fx/tests/example_dojoAnimations.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 9.8 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4   <head>
5
6        <title>skeleton page | The Dojo Toolkit</title>
7
8        <style type="text/css">         
9                @import "../../../dijit/themes/tundra/tundra.css";
10                body, html {
11                        width:100%;
12                        margin:0;
13                        padding:0;
14                        font:11pt Arial,sans-serif;
15                        color:#666;
16                }
17               
18                #container {
19                        width:760px;
20                        margin:0 auto;
21                }
22               
23                div.testBox {
24                        border:2px solid #ededed;
25                        background:#fefefe;
26                        height:200px;
27                        margin:0 auto;
28                        position:relative;
29                }
30               
31                div.testItem {
32                        position:absolute;
33                        background:#fff url('images/averycutedog.jpg') no-repeat center center;
34                        border:2px solid #f0f0f0;
35                        margin:0;
36                        padding:0;
37                        height:175px;
38                        width:175px;
39                        top:10px;
40                        left:10px;
41                }
42               
43                .altItem {
44                        position:absolute;
45                        top:10px;
46                        left:295px;
47                }
48               
49                .pad {
50                        padding:4px;
51                }
52               
53                .trick {
54                        height:175px;
55                        width:175px;
56                        visibility:hidden;
57                }
58                .odd,
59                .even { margin-left:1px; }
60               
61                #lorem {
62                        position:absolute;
63                        top:10px;
64                        left:15px;
65                        font:8pt Arial,sans-serif;
66                        width:175px;
67                        padding:4px;
68                        background:#ededed;
69                }
70               
71                #fisheyeList {
72                        width:95px;
73                        background:#666;
74                        padding:7px;
75                }
76                #fisheyeList li {
77                        color:#fff;
78                }
79        </style>
80       
81        <script type="text/javascript" src="../../../dojo/dojo.js"
82                data-dojo-config="parseOnLoad:true, isDebug:true"></script>
83
84        <script type="text/javascript">
85                dojo.require("dojo.parser");
86                dojo.require("dijit.form.Button"); // for the tests
87               
88                // core animations:
89                dojo.require("dojo.fx");
90               
91                // provides dojo.query() animations:
92                dojo.require("dojo.NodeList-fx");
93                dojo.require("dojox.fx.ext-dojo.NodeList");
94               
95                // core dojox package:
96                dojo.require("dojox.fx");
97                dojo.require("dojox.fx._core"); // _Line
98               
99                // addons:
100                dojo.require("dojox.fx.style");
101                dojo.require("dojo.fx.easing");
102               
103                // examples inline:
104                dojo.require("dojox.widget.FisheyeLite");
105        </script>
106       
107</head>
108<body class="tundra">
109        <div id="container">
110
111        <h2>Dojo FX: base animations</h2>
112       
113        <button dojoType="dijit.form.Button">
114                Fade In/Out
115                <script type="dojo/method" data-dojo-event="onClick">
116                        dojo.fadeOut({ node:"testSlide",
117                                onEnd:function(){
118                                        dojo.fadeIn({ node:"testSlide", delay:300 }).play();   
119                                }
120                        }).play();
121                </script>
122        </button>
123       
124        <button dojoType="dijit.form.Button">
125                animateProperty: height
126                <script type="dojo/method" data-dojo-event="onClick">
127                        dojo.animateProperty({
128                                node:"testSlide",
129                                properties:{ height:{ end:1 } },
130                                onEnd:function(){
131                                        dojo.animateProperty({
132                                                node:"testSlide",
133                                                delay:300,
134                                                properties:{ height:175 }
135                                        }).play();     
136                                }
137                        }).play();
138                </script>
139        </button>
140       
141        <button dojoType="dijit.form.Button">
142                animateProperty: width
143                <script type="dojo/method" data-dojo-event="onClick">
144                        dojo.animateProperty({
145                                node:"testSlide",
146                                properties:{ width:1 },
147                                onEnd:function(){
148                                        dojo.animateProperty({
149                                                node:"testSlide",
150                                                delay:300,
151                                                properties:{ width:175 }
152                                        }).play();     
153                                }
154                        }).play();
155                </script>
156        </button>
157
158        <div class="testBox" id="testSlideWrapper">
159                <div class="testItem" id="testSlide">
160                        <div class="trick">&nbsp;</div>
161                </div>
162        </div>
163
164
165        <h2>Animate CSS Properties:</h2>
166       
167        <button dojoType="dijit.form.Button">
168                marginLeft
169                <script type="dojo/method" data-dojo-event="onClick">
170                        dojo.animateProperty({
171                                node:"lorem",
172                                properties:{
173                                        marginLeft:{ end:322, start:1 }
174                                },
175                                onEnd: function(){
176                                        dojo.animateProperty({
177                                                node:"lorem",
178                                                properties:{
179                                                        marginLeft:{ end:1, start:322 }
180                                                },
181                                                delay:300
182                                        }).play();
183                                }
184                        }).play();
185                </script>
186        </button>
187       
188        <button dojoType="dijit.form.Button">
189                left / paddingTop
190                <script type="dojo/method" data-dojo-event="onClick">
191                        dojo.animateProperty({
192                                node:"lorem",
193                                properties:{
194                                        left: {
195                                                end: dojo.marginBox("cssNodeWrap").w - 195,
196                                                units:"px"
197                                        },
198                                        paddingTop:{ end:17, start:4 }
199                                },
200                                onEnd: function(){
201                                        dojo.animateProperty({
202                                                node:"lorem",
203                                                properties:{
204                                                        paddingTop:{ end:4, start:17 },
205                                                        left:10
206                                                },
207                                                delay:300
208                                        }).play();
209                                }
210                        }).play();
211                </script>
212        </button>
213       
214        <button dojoType="dijit.form.Button">
215                fontSize / width
216                <script type="dojo/method" data-dojo-event="onClick">
217                        dojo.animateProperty({
218                                node:"lorem",
219                                properties:{
220                                        width: { end:700, start:175 },
221                                        fontSize:{ end:21, units:"pt", start:11 }
222                                },
223                                onEnd: function(){
224                                        dojo.animateProperty({
225                                                node:"lorem",
226                                                properties:{
227                                                        width:175,
228                                                        fontSize:{ end:11, start:21, units:"pt" }
229                                                },
230                                                delay:700
231                                        }).play();
232                                }
233                        }).play();
234                </script>
235        </button>
236       
237        <div class="testBox" id="cssNodeWrap">
238                <div id="cssNode">
239                        <p id="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
240                        Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim.
241                        Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna.
242                        Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti
243                        sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
244                        In erat.
245                        </p>
246                </div>
247        </div>
248
249        <h2>dojo.fx - Core animations</h2>
250
251        <button dojoType="dijit.form.Button">
252                Slide
253                <script type="dojo/method" data-dojo-event="onClick">
254                        // we're 175px, slide to containerWidth - 195
255                        var left = dojo.marginBox("testSlideWrapper").w - 195;
256                        // make and play the animation
257                        dojo.fx.slideTo({
258                                top:10,
259                                left:left,
260                                node:"testSlideToo",
261                                onEnd: function(){
262                                        // slide'er back:
263                                        dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play();
264                                }
265                        }).play()
266                </script>
267        </button>
268
269        <button dojoType="dijit.form.Button">
270                Combine Slide / Fade
271                <script type="dojo/method" data-dojo-event="onClick">
272                        var anim1 = dojo.fx.slideTo({
273                                top: 10,
274                                left: dojo.marginBox("testSlideWrapper").w - 195,
275                                node: "testSlideToo",
276                                onEnd: function(){
277                                        // slide'er back:
278                                        dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play();
279                                }
280                        });
281                        var anim2 = dojo.fadeOut({
282                                node: "testSlideToo",
283                                onEnd: function(){
284                                        // we could switch out the backgroundImage property here.
285                                        dojo.fadeIn({ node:"testSlideToo" }).play();
286                                }
287                        });
288                        var combined = dojo.fx.combine([anim1,anim2]);
289                        combined.play();
290                </script>
291        </button>
292       
293        <button dojoType="dijit.form.Button">
294                Chain (4)
295                <script type="dojo/method" data-dojo-event="onClick">
296                        var anim1 = dojo.fadeOut({ node:"testSlideToo",
297                                // so anim1 is over, making this onEnd and anim2 basically
298                                // a combine() (depending on the duration: )
299                                onEnd:function(){
300                                        var delay = 125;
301                                        dojo.fadeIn({ node:'testSlideToo' }).play(delay);       
302                                }
303                        });
304
305                        var anim2 = dojo.animateProperty({
306                                node:"testSlideToo",
307                                properties:{
308                                        left: dojo.marginBox("testSlideTooWrap").w - 195
309                                },
310                                onEnd: function(){
311                                        dojo.fx.slideTo({ node:"testSlideToo", top:10, left:10 }).play(123);
312                                }
313                        });
314                        dojo.fx.chain([anim1,anim2]).play();
315                </script>
316        </button>
317
318        <div class="testBox" id="testSlideTooWrap">
319                <div class="testItem" id="testSlideToo">
320                        <div class="trick"></div>
321                </div>
322        </div>
323
324        <h2>dojo.query FX</h2>
325       
326        <button dojoType="dijit.form.Button">
327                fade .even
328                <script type="dojo/method" data-dojo-event="onClick">
329                        dojo.query(".even","queryUl").fadeOut({
330                                onEnd:function(){
331                                        dojo.query(".even","queryUl").fadeIn({ delay: 300 }).play();   
332                                }
333                        }).play();
334                </script>
335        </button>       
336
337        <button dojoType="dijit.form.Button">
338                fade .odd
339                <script type="dojo/method" data-dojo-event="onClick">
340                        dojo.query(".odd","queryUl").fadeOut({
341                                onEnd:function(){
342                                        dojo.query(".odd","queryUl").fadeIn({ delay: 300 }).play();     
343                                }
344                        }).play();
345                </script>
346        </button>       
347       
348        <button dojoType="dijit.form.Button">
349                shift .odd
350                <script type="dojo/method" data-dojo-event="onClick">
351                        dojo.query(".odd","queryUl").animateProperty({
352                                properties:{
353                                        marginLeft:34
354                                },
355                                duration:300,
356                                onEnd:function(){
357                                        dojo.query(".odd","queryUl").animateProperty({
358                                                delay: 300,
359                                                properties:{
360                                                        marginLeft:1
361                                                }
362                                        }).play();     
363                                }
364                        }).play();
365                </script>
366        </button>       
367
368        <button dojoType="dijit.form.Button">
369                mmm, easing
370                <script type="dojo/method" data-dojo-event="onClick">
371                        dojo.query(".odd","queryUl").animateProperty({
372                                easing:dojo.fx.easing.backOut,
373                                properties:{
374                                        marginLeft:34
375                                },
376                                duration:600,
377                                onEnd:function(){
378                                        dojo.query(".odd","queryUl").animateProperty({
379                                                delay: 300,
380                                                duration:1300,
381                                                easing:dojo.fx.easing.bounceOut,
382                                                properties:{
383                                                        marginLeft:1
384                                                }
385                                        }).play();     
386                                }
387                        }).play();
388                </script>
389        </button>       
390       
391        <button dojoType="dijit.form.Button">
392                Setup FisheyeList
393                <script type="dojo/method" data-dojo-event="onClick">
394                        this.setAttribute("disabled",true);
395                        dojo.query("li","fisheyeList").forEach(function(n){
396                                new dojox.widget.FisheyeLite({
397                                        properties:{
398                                                marginLeft:17,
399                                                width:1.175
400                                        },
401                                        onClick:function(){
402                                                dojo.byId("clickAlert").innerHTML = "clicked: " + this.id;
403                                        },
404                                        easeIn:dojo.fx.easing.elasticOut,
405                                        durationIn:1700
406                                },n).startup();
407                        }).style("cursor","pointer");
408                </script>
409        </button>
410       
411        <div class="testBox" id="queryParent">
412                <ul id="queryUl">
413                        <li class="odd">odd row</li>
414                        <li class="even">even row</li>
415                        <li class="odd">odd row</li>
416                        <li class="even">even row</li>
417                        <li class="odd">odd row</li>
418                        <li class="even">even row</li>
419                        <li class="odd">odd row</li>
420                        <li class="even">even row</li>
421                        <li class="odd">odd row</li>
422                </ul>
423                <div class="altItem">
424                        <p>(FisheyeLite makes this easy. be creative:)</p>
425                        <ul id="fisheyeList">
426                                <li class="odd">odd row</li>
427                                <li class="even">even row</li>
428                                <li class="odd">odd row</li>
429                                <li class="even">even row</li>
430                                <li class="odd">odd row</li>
431                                <li class="even" id="testIdFish">with id</li>
432                                <li class="odd">odd row</li>
433                        </ul>
434                        <p id="clickAlert"></p>
435                </div>
436        </div>
437
438        </div>
439</body>
440</html>
Note: See TracBrowser for help on using the repository browser.