dojo.animateAddClass

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)

How to use it

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();

Just like dojo.animateProperty

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();