Animation: Chaining Animations Using the end Event
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.
Animation Demo
xThis an example of what you can do with the YUI Animation Utility.
Follow the instructions above to see the animation in action.
This is placeholder text used to demonstrate how the above animation affects subsequent content.
Setting up the HTML
First we add some HTML to animate.
<div id="demo" class="yui-module"> <div class="yui-hd"> <h4>Animation Demo</h4> <a title="remove module" class="yui-remove"><em>x</em></a> </div> <div class="yui-bd"> <p>This an example of what you can do with the YUI Animation Utility.</p> <p><em>Follow the instructions above to see the animation in action.</em></p> </div> </div>
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.
var anim = new Y.Anim({ node: '#demo', to: { opacity: 0 } });
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 anim, so this refers to our Anim instance inside the handler.
var onEnd = function() { this.unsubscribe('end', onEnd); this.setAttrs({ to: { height: 0 }, easing: Y.Easing.bounceOut }); this.run(); };
Listening for the End Event
Now we will use the on method to subscribe to the end event, passing it our handler.
anim.on('end', onEnd);
Running the Animation
Finally we add an event handler to run the animation.
Y.get('#demo .yui-remove').on('click', anim.run, anim);
Full Script Source
YUI().use('anim', function(Y) { var anim = new Y.Anim({ node: '#demo', to: { opacity: 0 } }); var onEnd = function() { this.unsubscribe('end', onEnd); this.setAttrs({ to: { height: 0 }, easing: Y.Easing.bounceOut }); this.run(); }; anim.on('end', onEnd); Y.get('#demo .yui-remove').on('click', anim.run, anim); });
