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>