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.
218 lines (195 loc) • 6.91 kB
HTML
<html>
<head>
<title>dojox.fx.style - animatated CSS functions | The Dojo Toolkit</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "_animation.css"; /* external stylesheets to enhance readability in this test */
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="isDebug:true, parseOnLoad: true" ></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dojox.fx.style");
dojo.require("dojox.fx.ext-dojo.NodeList-style");
</script>
</head>
<body class="tundra">
<h1 class="testTitle">dojox.fx.style tests</h1>
<p id="fontTest">
dojox.fx.style provides a few methods to animate the changes that would occur
when adding or removing a class from a domNode.
</p>
<ul class="testUl" id="test1">
<li class="baseFont">dojox.fx.addClass(node, className, animargs); // Returns dojo.Animation</li>
<li class="baseFont">dojox.fx.removeClass(node, className, animargs); // Returns dojo.Animation</li>
<li class="baseFont">dojox.fx.toggleClass(node, className, force, animargs)</li>
</ul>
<button dojoType="dijit.form.Button">
spacing test
<script type="dojo/method" data-dojo-event="onClick">
dojo.query("li.baseFont").toggleClassFx("spacedHorizontal").play(5);
</script>
</button>
<button dojoType="dijit.form.Button">
line-height test
<script type="dojo/method" data-dojo-event="onClick">
dojo.query("li.baseFont").toggleClassFx("spacedVertical").play(5);
</script>
</button>
<button dojoType="dijit.form.Button">
font-size test
<script type="dojo/method" data-dojo-event="onClick">
dojo.query("li.baseFont").toggleClassFx("fontSizeTest").play(5);
</script>
</button>
<h2>testing sizes</h2>
<button dojoType="dijit.form.Button" id="addTall">
add .tall
<script type="dojo/method" data-dojo-event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.addClass(n, "tall", {
delay: delay
}));
delay += 200;
});
this.set('disabled',true);
dijit.byId('removeTall').set('disabled',false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button" id="removeTall" disabled="true">
remove .tall
<script type="dojo/method" data-dojo-event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.removeClass(n, "tall", {
delay: delay
}));
delay += 200;
});
this.set('disabled', true);
dijit.byId('addTall').set('disabled',false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button" id="addWide">
add .wide
<script type="dojo/method" data-dojo-event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.addClass(n, "wide", {
delay: delay
}));
delay += 200;
});
this.set('disabled',true);
dijit.byId('removeWide').set('disabled',false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button" id="removeWide" disabled="true">
remove .wide
<script type="dojo/method" data-dojo-event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.removeClass(n, "wide", {
delay: delay
}));
delay += 200;
});
this.set('disabled',true);
dijit.byId('addWide').set('disabled',false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button">
toggle .tiny
<script type="dojo/method" data-dojo-event="onClick">
var _anims = [];
// until dojox.fx.NodeList-fx is ready:
dojo.query("#colorTest > .testBox").forEach(function(node){
_anims.push(dojox.fx.toggleClass(node, "tiny"));
})
dojo.fx.combine(_anims).play(5);
</script>
</button>
<button dojoType="dijit.form.Button">
query add tall
<script type="dojo/method" data-dojo-event="onClick">
dojo.query("#colorTest > .testBox").addClassFx("tall").play();
</script>
</button>
<button dojoType="dijit.form.Button">
query remove tall
<script type="dojo/method" data-dojo-event="onClick">
dojo.query("#colorTest > .testBox").removeClassFx("tall").play();
</script>
</button>
<div id="colorTest">
<div id="colorTest1" class="floating testBox white"></div>
<div id="colorTest2" class="floating testBox black"></div>
<div id="colorTest3" class="floating testBox green"></div>
</div>
<br style="clear:both">
<h2>testing position</h2>
<p>This is a div position:relative with a position:absolute div inside. testing various t/l/b/r combos.
normal css inheritance rules apply, so setting .foo .bar if .foo was defined last in the css text, .bar
will take precedent. the below position test shows the results of this:
</p>
<button dojoType="dijit.form.Button">
.offsetSome
<script type="dojo/method" data-dojo-event="onClick">
dojox.fx.toggleClass("positionTest","offsetSome").play();
</script>
</button>
<button dojoType="dijit.form.Button">
.topLeft
<script type="dojo/method" data-dojo-event="onClick">
dojox.fx.toggleClass("positionTest","topLeft").play();
</script>
</button>
<button dojoType="dijit.form.Button">
.bottomRight
<script type="dojo/method" data-dojo-event="onClick">
dojox.fx.toggleClass("positionTest","bottomRight").play();
</script>
</button>
<div style="position:relative; height:175px; width:500px; border:1px solid #666;" id="positionBlock">
<div class="testBox absolutely" id="positionTest"></div>
</div>
<button dojoType="dijit.form.Button">
toggle .green
<script type="dojo/method" data-dojo-event="onClick">
dojox.fx.toggleClass("positionTest","green").play();
</script>
</button>
<button dojoType="dijit.form.Button">
toggle .black
<script type="dojo/method" data-dojo-event="onClick">
dojox.fx.toggleClass("positionTest","black").play();
</script>
</button>
<button dojoType="dijit.form.Button">
toggle .blue
<script type="dojo/method" data-dojo-event="onClick">
dojox.fx.toggleClass("positionTest","blue").play();
</script>
</button>
<p>Some properties
cannot be modified (fontFace, and so on), so to ensure the results at the end
of the animation are applied correctly and fully, the class name is set on the node
via dojo.add/removeClass().
</p>
</body>
</html>