#

# Example: Reversing an Animation

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>