YUI Anim on After event?

Question

There is a way to trigger an event after an animation is done? what's the cose for it? I'm very new with YUI libraries and i'm getting lost..

my cose now is

    var anim = new Y.Anim({
        node: node,
        duration: 1.0,
        easing: Y.Easing.easeOut
    });

...etc

Note: This applies to YUI2.

score 1 · Accepted Answer · answered Dec 09 '11 at 15:39

1

Yup! Something like:

var myAnim = new YAHOO.util.Anim("yourId", {
   left: {from: 0, to:75}
}, 1);

myAnim.onComplete.subscribe(function() {
   alert('Done!');
});

See http://developer.yahoo.com/yui/examples/animation/index.html for more examples.

answered Dec 09 '11 at 15:39

Mike Christensen

88,082
50
208
326

is this YUI 2 or 3? it doesnt sound to work on my code...i think im using yui3 – Francesco Dec 09 '11 at 16:03
3

This is for 2.x. I've never used 3.x, but the docs have some information here: http://yuilibrary.com/yui/docs/anim/end-event.html – Mike Christensen Dec 09 '11 at 16:06

score 1 · Answer 2 · answered Dec 09 '11 at 16:58

To do something after an animation is done, you just need to listen to the "end" event:

var anim = new Y.Anim({
    node: node,
    duration: 1.0,
    easing: Y.Easing.easeOut,
    on: {
        end: function (e) {
            // your stuff here
        }
    }
});

score 0 · Answer 3 · answered Dec 09 '11 at 15:39

The idea is, that since an animation takes time, you might want to be notified when the animation completes to perform any additional logic you might need: Here are a few uses for that event:

Trigger additional animations once an animation completes. This can be on the same element or a completely different part of the UI.
Remove the element from the DOM. Perhaps it was a popup-window, that once it is closed (with an animation), is no longer needed in the DOM
Something other, like filling the element with content etc.

YUI Anim on After event?

3 Answers3