#

# Example: Basic Node Transitions

The `transition` method animates the value of each property from the current value to the given value. Click the X to run the animation.

## Using the Transition Method

Transition allows you to animate one or more properties from their current value to a given value with the specified duration and easing method.

    Y.one('#demo').transition({
        duration: 1, // seconds
        easing: 'ease-out',
        height: 0,
        width: 0,
        left: '150px',
        top: '100px',
        opacity: 0
    });

## Transition with Callback

The `transition` method provides an optional callback argument, which is a function that runs once the transition is completed. The callback runs only for this transition.

    var node = Y.one('#demo');

    node.transition({
        duration: 1, // seconds
        easing: 'ease-out',
        height: 0,
        width: 0,
        left: '150px',
        top: '100px',
        opacity: 0
    }, function() {
        this.remove();
    });

## Complete Example Source

    <div id="demo">
        <a href="#" title="run the animation"></a>
    </div>

    <script type="text/javascript">
    YUI().use('transition', function(Y) {
        var node = Y.one('#demo');

        node.one('a').on('click', function(e) {
            e.preventDefault();

            node.transition({
                duration: 1, // seconds
                easing: 'ease-out',
                height: 0,
                width: 0,
                left: '150px',
                top: '100px',
                opacity: 0
            }, function() {
                this.remove();
            });
        });
    });
    </script>