Transition

Getting Started

To include the source files for Transition and its dependencies, first load the YUI seed file if you haven't already loaded it.

<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>

Next, create a new YUI instance for your application and populate it with the modules you need by specifying them as arguments to the YUI().use() method. YUI will automatically load any dependencies required by the modules you specify.

<script>
// Create a new YUI instance and populate it with the required modules.
YUI().use('transition', function (Y) {
    // Transition is available and ready for use. Add implementation
    // code here.
});
</script>

For more information on creating YUI instances and on the use() method, see the documentation for the YUI Global Object.

Using Transitions

Transition Method

The Transition Utility adds the transition method to Node instances when the transition module is included. The method accepts a configuration object, and an optional callback function. The config may include one or more CSS properties to be transitioned, an optional duration (in seconds), delay, and easing for fine-tuning transition behavior. Calling the transition method begins the transition. The callback is run after the transition has completed.

Y.one('#demo').transition({
    easing: 'ease-out',
    duration: 0.75, // seconds
    width: '10px',
    height: '10px'
}, function() {
    this.remove();
});

Supported Easings

Transition supports the following easings:

Transition easings are defined as part of the CSS3 Transition Module. See the full specification for further details.

Property Specific Attributes

The Transition Utility also allows for property specific attributes. Each attribute may optionally have its own duration, easing, and/or delay. This provides much finer control over the transition timeline, enabling more complex effects.

Y.one('#demo').transition({
    duration: 0.75,
    easing: 'ease-out',

    height: 0,

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

    opacity: {
        delay: 1.5,
        duration: 1.25,
        value: 0
    }
});

Listening for Events

The Transition Utility provides optional notifications for reacting to the start and end of a transition. These can be subscribed to via the on attribute of the transition config.

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

Y.one('#demo').transition({
    duration: 1,
    height:0,

    width: {
        delay: 1,
        duration: 0.5,
        value: 0
    },

    on: {
        start: function() {
            Y.log('start');
        },

        end: function() {
            Y.log('end');
        }
    }
});

For simplicity, an end handler can also be added as a function callback:

Y.one('#demo').transition({
    duration: 1,
    height:0,

    width: {
        delay: 1,
        duration: 0.5,
        value: 0
    }
}, function() {
    Y.log('end');
});