Dojo Animations provide a really simple way to listen to internal events, and fire custom code at various points during (or before) an animation. Its simplicity is what makes it really quite powerful.

All the fx functions return an instance of dojo._Animation, which provides all the tie-ins for your callbacks, and handles the internal timing of the sequence. Having these callbacks are great for complex actions, and even in simple cases. We’ll use dojo.fadeOut as an example.

There are two ways to connect to an animation event. During animation creation:

dojo.fadeOut({ 
    node:"testNode",
    onEnd:function(){
        console.log('animation done');
    }
}).play();

or by using dojo.connect (my preferred method):

var anim = dojo.fadeOut({ node:"testNode" });
var handle = dojo.connect(anim,"onEnd",function(){
    console.log("animation done");
});
anim.play();

This gives us more flexibility, and less potential of leakage. We can disconnect the onEnd function at any calling dojo.disconnect(handle), and connect a different
function on our whim. It’s three steps, compared to the one, but worth the extra effort in potentially long-lived pages with repeating animations.

In the interest of performance, you should cache as often as possible. Creating the animation
once and reusing onEnd (or any of the other available events: beforeBegin, onBegin, onAnimate, onPlay, onStop) is slightly more responsive.

You can see a variation of this technique in the dojo.moj.oe roller.js, which creates all the animations and connections once within a scope, and directly controls it’s own usage (which is slightly more advanced, but a good technique to learn none the less).

Tags: Fun