| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd" |
|---|
| 3 | > |
|---|
| 4 | <html lang="en"> |
|---|
| 5 | <head> |
|---|
| 6 | <title>Test dojox.fx.ext-dojo.complex</title> |
|---|
| 7 | <style> |
|---|
| 8 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 9 | body{ |
|---|
| 10 | font-family:sans-serif; |
|---|
| 11 | font-size:14px; |
|---|
| 12 | } |
|---|
| 13 | #cnt{ |
|---|
| 14 | width:300px; |
|---|
| 15 | height:300px; |
|---|
| 16 | border:1px solid #666; |
|---|
| 17 | position:relative; |
|---|
| 18 | } |
|---|
| 19 | #words{ |
|---|
| 20 | width:300px; |
|---|
| 21 | height:300px; |
|---|
| 22 | margin:0px; |
|---|
| 23 | padding:5px; |
|---|
| 24 | top:0px; |
|---|
| 25 | position:absolute; |
|---|
| 26 | border:1px solid #000; |
|---|
| 27 | background:#0000ff; |
|---|
| 28 | clip:rect(10px 30px 30px 10px); |
|---|
| 29 | } |
|---|
| 30 | code{ |
|---|
| 31 | font-family:monospace; |
|---|
| 32 | font-size:11px; |
|---|
| 33 | white-space:nowrap; |
|---|
| 34 | } |
|---|
| 35 | </style> |
|---|
| 36 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true" ></script> |
|---|
| 37 | <script> |
|---|
| 38 | dojo.require("dojox.fx.ext-dojo.complex"); |
|---|
| 39 | |
|---|
| 40 | dojo.addOnLoad(function(){ |
|---|
| 41 | var ani = dojo.animateProperty({ |
|---|
| 42 | node:dojo.byId("words"), |
|---|
| 43 | duration:800, |
|---|
| 44 | properties:{ |
|---|
| 45 | clip:{start:'rect(150px 150px 150px 150px)', end:'rect(0px 300px 300px 0px)'} |
|---|
| 46 | } |
|---|
| 47 | }).play(); |
|---|
| 48 | }); |
|---|
| 49 | |
|---|
| 50 | </script> |
|---|
| 51 | </head> |
|---|
| 52 | <body> |
|---|
| 53 | <h1>Test dojox.fx.ext-dojo.complex</h1> |
|---|
| 54 | <p> |
|---|
| 55 | The <em>dojox.fx.ext-dojo.complex</em> class is an extension of dojo.animateProperty which adds functionality |
|---|
| 56 | that animates a "complex property". The primary example is the |
|---|
| 57 | clip style: <code>rect(10px 30px 10px 50px)</code>. |
|---|
| 58 | </p> |
|---|
| 59 | <p> |
|---|
| 60 | Frankly, the clip style is not very useful nor exciting. But the <em>dojox.fx.ext-dojo.complex</em> class |
|---|
| 61 | will animate any property contained within parenthesis. So it can also be used with (and is actually intended for) |
|---|
| 62 | CSS3 properties, such as transform: |
|---|
| 63 | <code>transform: rotate(10deg) translateX(0px)</code> |
|---|
| 64 | or even gradients (it would only affect the properties within the color-stops): |
|---|
| 65 | <code>background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #ff0000),color-stop(1.0, #0000FF));</code> |
|---|
| 66 | </p> |
|---|
| 67 | <p> |
|---|
| 68 | A few notes on the clip:rect() property. IE only accepts no commas - Firefox & Safari accepts both. So.... don't use commas! |
|---|
| 69 | Also, the node must be set to position:absolute to work. |
|---|
| 70 | </p> |
|---|
| 71 | <div id="cnt"> |
|---|
| 72 | <div id="words"> |
|---|
| 73 | <p> |
|---|
| 74 | Dojo saves you time, performs better, and scales to meet your needs. |
|---|
| 75 | It's the toolkit that experienced designers and developers turn to for building great experiences. |
|---|
| 76 | <br/><br/> |
|---|
| 77 | Dojo is a set of integrated libraries that accelerate development from simple pages to the most sophisticated web applications. |
|---|
| 78 | Great resources are available to help you take advantage of all that power. |
|---|
| 79 | <br/><br/> |
|---|
| 80 | Dojo Campus hosts the official documentation wiki, short how-to articles, and a rich set of examples |
|---|
| 81 | to help you leverage the power and depth of Dojo. |
|---|
| 82 | </p> |
|---|
| 83 | </div> |
|---|
| 84 | </div> |
|---|
| 85 | |
|---|
| 86 | </body> |
|---|
| 87 | </html> |
|---|
