dojox.fx CSS Class Animations
a set of functions to animate properties based on normalized CSS class definitions.
See the dojox/fx/style reference documentation for more information.
Animate the effects of adding a class to a node
Creates an animation that will animate the properties of a node to the properties defined in a standard CSS .class definition. (calculating the differences itself)
| Parameter | Type | Description |
|---|---|---|
| node | String | DomNode | A String ID or DomNode referce to animate |
| cssClass | String | The CSS class name to add to the node |
| args | Object |
Optional Additional optional |
.bar { line-height: 12px; }
.foo { line-height: 40px; }
<div class="bar" id="test">
Multi<br>line<br>text
</div>
// animate to line-height:40px
dojo.fx.addClass("test", "foo").play();
Animate the effects of removing a class from a node
Creates an animation that will animate the properties of a node (args.node) to the properties calculated after removing a standard CSS className from a that node.
calls dojo.removeClass(args.cssClass) onEnd of animation
standard dojo.Animation object rules apply.
| Parameter | Type | Description |
|---|---|---|
| node | undefined | |
| cssClass | undefined | |
| args | undefined |
// animate the removal of "foo" from a node with id="bar"
dojox.fx.removeClass("bar", "foo").play()
Animate the effects of Toggling a class on a Node
creates an animation that will animate the effect of toggling a class on or off of a node. Adds a class to node if not present, or removes if present. Pass a boolean condition if you want to explicitly add or remove.
| Parameter | Type | Description |
|---|---|---|
| node | String | DomNode | The domNode (or string of the id) to toggle |
| cssClass | String | String of the classname to add to the node |
| condition | Boolean |
Optional If passed, true means to add the class, false means to remove. |
| args | Object |
Optional Additional |
// add the class "sampleClass" to a node id="theNode"
dojox.fx.toggleClass("theNode","sampleClass",true).play();
// toggle the class "sampleClass" on the node id="theNode"
dojox.fx.toggleClass("theNode","sampleClass").play();