#

# Example: Using Transitions

CSS properties can be transitioned with a delay, allowing for the creation of more advanced effects. Click the X to run the animation.

x

## Separate Transition Properties

Each transition property can optionally have its own duration, delay, and/or easing.

An optional callback can be passed as the second argument to `transition()`. The callback is run after all property transitions have completed. In this case, we will use it to remove the node from the document.

    Y.one('#demo').transition({
        duration: 1, // seconds
        easing: 'ease-out', // CSS syntax
        height: 0,
        top: '100px',

        width: {
            delay: 1,
            duration: 0.5,
            easing: 'ease-in',
            value: 0
        },

        left: {
            delay: 1,
            duration: 0.5,
            easing: 'ease-in',
            value: '150px'
        },

        opacity: {
            delay: 1.5,
            duration: 0.25,
            value: 0
        }
    }, function() {
        this.remove();
    });

## Complete Example Source

    <div id="demo">
        <a href="#">x</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', // CSS syntax
                height: 0,
                top: '100px',

                width: {
                    delay: 1,
                    duration: 0.75,
                    easing: 'ease-in',
                    value: 0
                },

                left: {
                    delay: 1,
                    duration: 0.75,
                    easing: 'ease-in',
                    value: '150px'
                },

                opacity: {
                    delay: 1.5,
                    duration: 0.75,
                    value: 0
                }
            }, function() {
                node.remove();
            });
        });
    });

    </script>
    </body>
    </html>