Example: Using Transitions

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>