Page MenuHomeCode
Files F1120058

test_animateClass.html
No OneTemporary
Actions

test_animateClass.html
View Options

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx.style - animatated CSS functions | The Dojo Toolkit</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<script type="text/javascript" src="../style.js"></script><!-- debugging -->
<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">
dojo.require("dojox.fx.style");
dojo.require("dijit.form.Button");
</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(/* Object */)args); // Returns dojo._Animation</li>
<li class="baseFont">dojox.fx.removeClass(/* Object */args); // Returns dojo._Animation</li>
<li class="baseFont">dojox.fx.toggleClass(/* DomNode */node, /* String */cssClass,/* Boolean */force)</li>
</ul>
<button dojoType="dijit.form.Button">
spacing test
<script type="dojo/method" event="onClick">
var _anims = [];
// until dojox.fx.NodeList-fx is ready:
dojo.query("li.baseFont").forEach(function(node){
_anims.push(dojox.fx.toggleClass(node,"spacedHorizontal"));
})
dojo.fx.combine(_anims).play(5);
</script>
</button>
<button dojoType="dijit.form.Button">
line-height test
<script type="dojo/method" event="onClick">
var _anims = [];
// until dojox.fx.NodeList-fx is ready:
dojo.query("li.baseFont").forEach(function(node){
_anims.push(dojox.fx.toggleClass(node,"spacedVertical"));
})
dojo.fx.combine(_anims).play(5);
</script>
</button>
<button dojoType="dijit.form.Button">
font-size test
<script type="dojo/method" event="onClick">
var _anims = [];
// until dojox.fx.NodeList-fx is ready:
dojo.query("li.baseFont").forEach(function(node){
_anims.push(dojox.fx.toggleClass(node,"fontSizeTest"));
})
dojo.fx.combine(_anims).play(5);
</script>
</button>
<h2>testing sizes</h2>
<button dojoType="dijit.form.Button" id="addTall">
add .tall
<script type="dojo/method" event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.addClass({
node:n,
cssClass:"tall",
delay: delay
}));
delay+=200;
});
this.setDisabled(true);
dijit.byId('removeTall').setDisabled(false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button" id="removeTall" disabled="true">
remove .tall
<script type="dojo/method" event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.removeClass({
node:n,
cssClass:"tall",
delay: delay
}));
delay+=200;
});
this.setDisabled(true);
dijit.byId('addTall').setDisabled(false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button" id="addWide">
add .wide
<script type="dojo/method" event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.addClass({
node:n,
cssClass:"wide",
delay: delay
}));
delay+=200;
});
this.setDisabled(true);
dijit.byId('removeWide').setDisabled(false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button" id="removeWide" disabled="true">
remove .wide
<script type="dojo/method" event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.removeClass({
node:n,
cssClass:"wide",
delay: delay
}));
delay+=200;
});
this.setDisabled(true);
dijit.byId('addWide').setDisabled(false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button">
toggle .tiny
<script type="dojo/method" 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>
<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" event="onClick">
dojox.fx.toggleClass("positionTest","offsetSome").play();
</script>
</button>
<button dojoType="dijit.form.Button">
.topLeft
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","topLeft").play();
</script>
</button>
<button dojoType="dijit.form.Button">
.bottomRight
<script type="dojo/method" 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" event="onClick">
dojox.fx.toggleClass("positionTest","green").play();
</script>
</button>
<button dojoType="dijit.form.Button">
toggle .black
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","black").play();
</script>
</button>
<button dojoType="dijit.form.Button">
toggle .blue
<script type="dojo/method" 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>

File Metadata

Mime Type
text/html
Expires
Jun 14 2025, 19:17 (9 w, 5 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
27104
Default Alt Text
test_animateClass.html (9 KB)

Event Timeline