This script adds the functions "animateAddClass", "animateRemoveClass" and "animateToggleClass" to the Dojo namespace (dojo.animateAddClass).
These functions enable you to animate to the style that is defined in a CSS class.
It's more lightweight than the dojox.fx.style version (2KB vs. 9KB)
A brief example; if we have an HTML node:
<div id="foo">
Lorum ipsum
</div>
And a piece of CSS:
.bar {
background: red;
}
We can use this function to animate the transistion between #foo and #foo.bar:
dojo.animateAddClass({
node:"foo",
className:"bar"
}).play();
This script is based on dojo.animateProperty so more custom configurations are possible as well. The only extra property you have to provide is "className", the rest is basically all just dojo.animateproperty().
dojo.animateAddClass({
node:"foo",
className:"bar",
duration: 1500,
easing:dojo.fx.easing.bounceIn,
onEnd: function(){
console.log("ended");
}
}).play();