Blame | Last modification | View Log | RSS feed
<!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 occurwhen 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, .barwill 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 propertiescannot be modified (fontFace, and so on), so to ensure the results at the endof the animation are applied correctly and fully, the class name is set on the nodevia dojo.add/removeClass().</p></body></html>