This demonstrates how to use the reverse attribute to change the behavior of the animation.
Click the icon in the header to toggle the element's height.
Reversing an Animation
+Click the icon in the header to toggle the element's height.
+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="yui3-module"> + <div class="yui3-hd"> + <h3>Reversing an Animation</h3> + </div> + <div class="yui3-bd"> + <p>Click the icon in the header to toggle the element's height.</p> + </div> +</div> +<p>This is placeholder text used to demonstrate how the above animation affects subsequent content.</p>+ + +
Using the NodeFX Plugin
+For this example, we will use Node's fx plugin to animate the element. The plugin adds the anim instance to the Node instance, pre-configuring it to use the Node instance as the Anim's node. The plug method accepts a class to construct and an optional config to pass to the constructor.
Setting the from attribute to the expanded height of the element allows us to toggle the effect using the reverse attribute, which we will see below (from uses current value when omitted).
var module = Y.one('#demo');
+
+// add fx plugin to module body
+var content = module.one('.yui3-bd').plug(Y.Plugin.NodeFX, {
+ from: { height: 0 },
+ to: {
+ height: function(node) { // dynamic in case of change
+ return node.get('scrollHeight'); // get expanded height (offsetHeight may be zero)
+ }
+ },
+
+ easing: Y.Easing.easeOut,
+ from: { height: 0 },
+ duration: 0.5
+});
+
+
+Creating the Control Element
+Because our behavior only works when JS is available, let's go ahead and add our control element using JS as well.
+ +// use dynamic control for dynamic behavior
+var control = Y.Node.create(
+ '<a title="show/hide content" class="yui3-toggle">' +
+ '<em>toggle</em>' +
+ '</a>'
+);
+
+// append dynamic control to header section
+module.one('.yui3-hd').appendChild(control);
+
+
+Toggling Animation Behavior
+Before calling run in our click handler, we will use the reverse attribute toggle the direction of the animation depending on whether its opening or closing.
var onClick = function(e) {
+ module.toggleClass('yui-closed');
+ content.fx.set('reverse', !content.fx.get('reverse')); // toggle reverse
+};
+
+
+Running the Animation
+Finally we add an event handler to run the animation.
+ +module.one('.yui3-toggle').on('click', onClick);
+
+
+Complete Example Source
+<div id="demo" class="yui3-module">
+ <div class="yui3-hd">
+ <h3>Reversing an Animation</h3>
+ </div>
+ <div class="yui3-bd">
+ <p>Click the icon in the header to toggle the element's height.</p>
+ </div>
+</div>
+<p>This is placeholder text used to demonstrate how the above animation affects subsequent content.</p>
+
+
+<script type="text/javascript">
+YUI().use('anim', function(Y) {
+ var module = Y.one('#demo');
+
+ // add fx plugin to module body
+ var content = module.one('.yui3-bd').plug(Y.Plugin.NodeFX, {
+ from: { height: 0 },
+ to: {
+ height: function(node) { // dynamic in case of change
+ return node.get('scrollHeight'); // get expanded height (offsetHeight may be zero)
+ }
+ },
+
+ easing: Y.Easing.easeOut,
+ duration: 0.5
+ });
+
+ var onClick = function(e) {
+ e.preventDefault();
+ module.toggleClass('yui3-closed');
+ content.fx.set('reverse', !content.fx.get('reverse')); // toggle reverse
+ content.fx.run();
+ };
+
+ // use dynamic control for dynamic behavior
+ var control = Y.Node.create(
+ '<a title="collapse/expand element" class="yui3-toggle">' +
+ '<em>toggle</em>' +
+ '</a>'
+ );
+
+ // append dynamic control to header section
+ module.one('.yui3-hd').appendChild(control);
+ control.on('click', onClick);
+
+});
+</script>
+
+