Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
gallery-2011.12.14-21-12 eculver gallery-event-transition
  • Loading branch information
YUI Builder committed Dec 14, 2011
1 parent fd83b6f commit 8ad38de
Show file tree
Hide file tree
Showing 7 changed files with 486 additions and 0 deletions.
42 changes: 42 additions & 0 deletions src/gallery-event-transition/README.rst
@@ -0,0 +1,42 @@
===================================
YUI3 CSS Transition Synthetic Event
===================================

Defines normalized CSS3 transition events for the various browser
environments. Currently, the only supported event is ``transitionend`` due
to the current state of browser support. Delegation is not currently
supported for this event.

Example usage:
--------------

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::

Y.one('#myelement').on('transitionend', function (e) {
console.log("transition end!");
});

Y.one('#myelement').addClass('wow');
4 changes: 4 additions & 0 deletions src/gallery-event-transition/build.properties
@@ -0,0 +1,4 @@
builddir=../../../builder/componentbuild
component=gallery-event-transition
component.jsfiles=transition.js
component.requires=event-synthetic
6 changes: 6 additions & 0 deletions src/gallery-event-transition/build.xml
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project name="Transistion Event" default="local">
<description>build file for CSS3 Transition Events (gallery-event-transition)</description>
<property file="build.properties" />
<import file="${builddir}/3.x/bootstrap.xml" description="Default Build Properties and Targets" />
</project>
76 changes: 76 additions & 0 deletions src/gallery-event-transition/js/transition.js
@@ -0,0 +1,76 @@
/**
* CSS3 Transition Synthetic Event
*
* Defines normalized CSS3 transition events for the various browser
* environments. Currently, the only supported event is `transitionend` due
* to the current state of browser support. Delegation is not currently
* supported for this event.
*
* Example usage:
*
* 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:
*
* Y.one('#myelement').on('transitionend', function (e) {
* console.log("transition end!");
* });
*
* Y.one('#myelement').addClass('wow');
*
*/

var EVT_NAMES = {
ie: 'MSTransitionEnd',
opera: 'oTransitionEnd',
gecko: 'transitionend',
webkit: 'webkitTransitionEnd'
};

Y.Event.define('transitionend', {
// don't worry about which version of the UA since the event won't
// fire for those unsupported versions and managing version support
// here is kinda dumb.
on: function (node, sub, notifier) {
var evtName;

if (Y.UA.ie) {
evtName = EVT_NAMES.ie;
} else if (Y.UA.opera) {
evtName = EVT_NAMES.opera;
} else if (Y.UA.gecko) {
evtName = EVT_NAMES.gecko;
} else if (Y.UA.webkit) {
evtName = EVT_NAMES.webkit;
}

sub._handle = Y.Event.attach(evtName, function (e) {
notifier.fire(e);
});
},

detatch: function (node, sub, notifier) {
sub._handle.detach();
}
});

0 comments on commit 8ad38de

Please sign in to comment.