You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
4.5 KiB
210 lines
4.5 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>Test dojox.fx.ext-dojo.complex (fx using transform)</title> |
|
<style type="text/css"> |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
html,body{ |
|
font-family:sans-serif; |
|
font-size:14px; |
|
padding:0; |
|
margin:0; |
|
} |
|
code{ |
|
font-family:monospace; |
|
font-size:15px; |
|
white-space:pre; |
|
} |
|
.box{ |
|
border:1px solid #999; |
|
padding:0; |
|
position:absolute; |
|
width:1024px; |
|
height:190px; |
|
overflow:hidden; |
|
left:40px; |
|
} |
|
.message{ |
|
width:100%; |
|
background: #999; |
|
color: #ddd; |
|
margin:0; |
|
padding:3px 0; |
|
} |
|
.message span{ |
|
padding: 0 3px; |
|
color:#009; |
|
cursor:pointer; |
|
text-decoration:underline; |
|
} |
|
#rotate{ |
|
top:100px; |
|
} |
|
#skewX{ |
|
top:300px; |
|
} |
|
#skewY{ |
|
top:500px; |
|
} |
|
#skew{ |
|
top:700px; |
|
} |
|
#scaleX{ |
|
top:900px; |
|
} |
|
#scaleY{ |
|
top:1100px; |
|
} |
|
#scale{ |
|
top:1300px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>Test dojox.fx.ext-dojo.complex using css3 transforms</h1> |
|
<div> |
|
<div class="box" id="rotate"> |
|
<div class="message"><span id="rotateLabel">rotate - click me!</span></div> |
|
<code> |
|
dojo.animateProperty({ |
|
node:"rotate", |
|
duration: 1000, |
|
properties:{ |
|
transform:{start:'rotate(0deg)', end:'rotate(360deg)'} |
|
} |
|
}).play(); |
|
</code> |
|
</div> |
|
</div> |
|
<div class="box" id="skewX"> |
|
<div class="message"><span id="skewXLabel">skewX - click me!</span></div> |
|
<code> |
|
dojo.animateProperty({ |
|
node:"skewX", |
|
duration: 1000, |
|
properties:{ |
|
transform:{start:'skewX(0deg)', end:'skewX(20deg)'} |
|
} |
|
}).play(); |
|
</code> |
|
</div> |
|
<div class="box" id="skewY"> |
|
<div class="message"><span id="skewYLabel">skewY - click me!</span></div> |
|
<code> |
|
dojo.animateProperty({ |
|
node:"skewY", |
|
duration: 1000, |
|
properties:{ |
|
transform:{start:'skewY(0deg)', end:'skewY(10deg)'} |
|
} |
|
}).play(); |
|
</code> |
|
</div> |
|
<div class="box" id="skew"> |
|
<div class="message"><span id="skewLabel">skew - click me!</span></div> |
|
<code> |
|
dojo.animateProperty({ |
|
node:"skew", |
|
duration: 1000, |
|
properties:{ |
|
transform:{start:'skew(0deg,0deg)', end:'skew(20deg,10deg)'} |
|
} |
|
}).play(); |
|
</code> |
|
</div> |
|
<div class="box" id="scaleX"> |
|
<div class="message"><span id="scaleXLabel">scaleX - click me!</span></div> |
|
<code> |
|
dojo.animateProperty({ |
|
node: "scaleX", |
|
properties:{ |
|
transform:{start:'scaleX(1)', end:'scaleX(2)'} |
|
} |
|
}).play() |
|
</code> |
|
</div> |
|
<div class="box" id="scaleY"> |
|
<div class="message"><span id="scaleYLabel">scaleY - click me!</span></div> |
|
<code> |
|
dojo.animateProperty({ |
|
node: "scaleY", |
|
properties:{ |
|
transform:{start:'scaleY(1)', end:'scaleY(.5)'} |
|
} |
|
}).play() |
|
</code> |
|
</div> |
|
<div class="box" id="scale"> |
|
<div class="message"><span id="scaleLabel">scale - click me!</span></div> |
|
<code> |
|
dojo.animateProperty({ |
|
node: "scaleY", |
|
properties:{ |
|
transform:{start:'scale(1,1)', end:'scale(2,.5)'} |
|
} |
|
}).play() |
|
</code> |
|
</div> |
|
<script type="text/javascript" src="../../../dojo/dojo.js"></script> |
|
<script type="text/javascript"> |
|
dojo.require("dojox.html.ext-dojo.style"); |
|
dojo.require("dojox.fx.ext-dojo.complex"); |
|
|
|
dojo.ready(function(){ |
|
var animations = { |
|
rotate: dojo.animateProperty({ |
|
node: "rotate", |
|
duration: 1000, |
|
properties:{ |
|
transform:{start:'rotate(0deg)', end:'rotate(360deg)'} |
|
} |
|
}), |
|
skew: dojo.animateProperty({ |
|
node: "skew", |
|
properties:{ |
|
transform:{start:'skew(0deg,0deg)', end:'skew(20deg,10deg)'} |
|
} |
|
}), |
|
skewX: dojo.animateProperty({ |
|
node: "skewX", |
|
properties:{ |
|
transform:{start:'skewX(0deg)', end:'skewX(20deg)'} |
|
} |
|
}), |
|
skewY: dojo.animateProperty({ |
|
node: "skewY", |
|
properties:{ |
|
transform:{start:'skewY(0deg)', end:'skewY(10deg)'} |
|
} |
|
}), |
|
scaleX: dojo.animateProperty({ |
|
node: "scaleX", |
|
properties:{ |
|
transform:{start:'scaleX(1)', end:'scaleX(2)'} |
|
} |
|
}), |
|
scaleY: dojo.animateProperty({ |
|
node: "scaleY", |
|
properties:{ |
|
transform:{start:'scaleY(1)', end:'scaleY(.5)'} |
|
} |
|
}), |
|
scale: dojo.animateProperty({ |
|
node: "scale", |
|
properties:{ |
|
transform:{start:'scale(1,1)', end:'scale(2,.5)'} |
|
} |
|
}) |
|
|
|
}; |
|
dojo.forEach(["rotate", "skewX", "skewY", "skew", "scaleX", "scaleY", "scale"], function(i){ |
|
dojo.connect(dojo.byId(i + "Label"), "onclick", function(){ |
|
animations[i].play(); |
|
}); |
|
}) |
|
}); |
|
|
|
</script> |
|
</body> |
|
</html>
|
|
|