Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

event-transition (gallery-event-transition) on cdn

Last Updated: 12/9/11

+ 0 -

Evan Culver

YUI Contributor

Created: 12/9/11
Last CDN Push: 12/14/11
Build Tag: gallery-2011.12.14-21-12
Project: YUI 3
License: YUI BSD
YUI Version: 3.4.1
Free for use.

Currently, the only event associated with CSS transitions is 'transitionend' (see https://developer.mozilla.org/en/CSS/CSS_transitions). This module simply normalizes the native browser event to a common YUI3 synthetic name so that you don't have to worry about binding different event names for each browser environment.

Code Sample

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

HTML:
 
<div id="myelement">Hi!</div>
 
CSS:
 
#myelement {
    background-color: #000;
    color: #FFF;
    height: 100px;
    width: 100px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
 
#myelement.wow {
    background-color: #FFF;
    color: #000;
}
 
JS:
 
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.12.14-21-12'
}).use('gallery-event-transition', function(Y) {
    Y.one('#myelement').on('transitionend', function (e) {
        console.log("transition end!");
    });
 
    Y.one('#myelement').addClass('wow');
});