Animation Utility: Chaining Animations Using the
This demonstrates how to use the
end event to chain animations runs together.
Click the X in the header to fade the element out, then shrink its height to zero.
Setting up the HTML
First we add some HTML to animate.
Creating the Anim Instance
Now we create an instance of
Y.Anim, passing it a configuration object that includes the
node we wish to animate and the
to attribute containing the properties to be transitioned and final values.
Handling the End Event
We will need a function to run when the
end event fires. Note that the context of our handler defaults to
this refers to our Anim instance inside the handler.
Listening for the End Event
Now we will use the
on method to subscribe to the
end event, passing it our handler.
Running the Animation
Finally we add an event handler to run the animation.