Flash-in Animations

The flash_in, green_flash, and red_flash animations are factory methods that return pre-configured animation objects.

var LAZR_YUI_CONFIG = {
    filter: "min",
    base: "../../build/",
    modules: LAZR_MODULES,
};
YUI(LAZR_YUI_CONFIG).use('lazr.anim', function(Y) {

    var yellow = Y.lazr.anim.flash_in(...);    // A yellow flash.
    var green  = Y.lazr.anim.green_flash(...); // A green flash.
    var red    = Y.lazr.anim.red_flash(...);   // A red flash.

});

Configuration Options

The only configuration option you need to specify is the node that the animation will target. Any additional options will override the flash-in animation defaults.

# A blue flash-in animation

var blue_flash = Y.lazr.anim.flash_in({
    node: '#target',
    from: { backgroundColor: '#000099' }  // Override the default
});

blue_flash.run();

Multiple Elements

Cell One Cell Two

node can be one of: a selector (for single or multiple elements, i.e. '#target' or '#target td'), an individual Node object, or a NodeList, and the animation will occur in all nodes concurrently.

# flash a table row

var blue_flash = Y.lazr.anim.flash_in({
    node: '#target-table-row td',
    from: { backgroundColor: '#000099' }  // Override the default
});

blue_flash.run();
is equivalent to
# flash a table row

var blue_flash = Y.lazr.anim.flash_in({
    node: Y.all('#target-table-row td'),
    from: { backgroundColor: '#000099' }  // Override the default
});

blue_flash.run();