dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
88 lines (84 loc) • 2.84 kB
HTML
<html lang="en">
<head>
<title>Test dojox.fx.ext-dojo.complex</title>
<style>
@import "../../../dijit/tests/css/dijitTests.css";
body{
font-family:sans-serif;
font-size:14px;
}
#cnt{
width:300px;
height:300px;
border:1px solid #666;
position:relative;
}
#words{
width:300px;
height:300px;
margin:0px;
padding:5px;
top:0px;
position:absolute;
border:1px solid #000;
background:#0000ff;
clip:rect(10px 30px 30px 10px);
}
code{
font-family:monospace;
font-size:11px;
white-space:nowrap;
}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true" ></script>
<script>
dojo.require("dojox.fx.ext-dojo.complex");
dojo.addOnLoad(function(){
var ani = dojo.animateProperty({
node:dojo.byId("words"),
duration:800,
properties:{
clip:{start:'rect(150px 150px 150px 150px)', end:'rect(0px 300px 300px 0px)'}
}
}).play();
});
</script>
</head>
<body>
<h1>Test dojox.fx.ext-dojo.complex</h1>
<p>
The <em>dojox.fx.ext-dojo.complex</em> class is an extension of dojo.animateProperty which adds functionality
that animates a "complex property". The primary example is the
clip style: <code>rect(10px 30px 10px 50px)</code>.
</p>
<p>
Frankly, the clip style is not very useful nor exciting. But the <em>dojox.fx.ext-dojo.complex</em> class
will animate any property contained within parenthesis. So it can also be used with (and is actually intended for)
CSS3 properties, such as transform:
<code>transform: rotate(10deg) translateX(0px)</code>
or even gradients (it would only affect the properties within the color-stops):
<code>background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #ff0000),color-stop(1.0, #0000FF));</code>
</p>
<p>
A few notes on the clip:rect() property. IE only accepts no commas - Firefox & Safari accepts both. So.... don't use commas!
Also, the node must be set to position:absolute to work.
</p>
<div id="cnt">
<div id="words">
<p>
Dojo saves you time, performs better, and scales to meet your needs.
It's the toolkit that experienced designers and developers turn to for building great experiences.
<br/><br/>
Dojo is a set of integrated libraries that accelerate development from simple pages to the most sophisticated web applications.
Great resources are available to help you take advantage of all that power.
<br/><br/>
Dojo Campus hosts the official documentation wiki, short how-to articles, and a rich set of examples
to help you leverage the power and depth of Dojo.
</p>
</div>
</div>
</body>
</html>