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
+ x +This 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); + +});
