end-event.mustache revision 1f08a8488664773a7d96fa3a043a639692d2a5cb
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div class="intro">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <p>This demonstrates how to use the <code>end</code> event.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <p> Click the X in the header to fade the element out and remove it from the document once the fade completes.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div class="example">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney{{>end-event-source}}
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Setting up the HTML</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>First we add some HTML to animate.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div id="demo" class="yui3-module">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <div class="yui3-hd">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <h3>Animation Demo</h3>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <a title="remove module" class="yui3-remove"><em>x</em></a>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <div class="yui3-bd">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <p>This an example of what you can do with the YUI Animation Utility.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <p><em>Follow the instructions above to see the animation in action.</em></p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Creating the Anim Instance</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate and the <code>to</code> attribute containing the properties to be transitioned and final values.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneyvar anim = new Y.Anim({
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney node: '#demo',
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney to: { opacity: 0 }
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Handling the End Event</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>We will need a function to run when the <code>end</code> event fires. Note that the context of our handler defaults to <code>anim</code>, so <code>this</code> refers to our Anim instance inside the handler.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneyvar onEnd = function() {
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney var node = this.get('node'); // this === anim
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney node.get('parentNode').removeChild(node); // node is an instance of Node
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Listening for the End Event</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>Now we will use the <code>on</code> method to subscribe to the <code>end</code> event, passing it our handler.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneyanim.on('end', onEnd);
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Running the Animation</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>Finally we add an event handler to run the animation.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt SweeneyY.one('#demo .yui3-remove').on('click', anim.run, anim);
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Complete Example Source</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney{{>end-event-source}}