forked from yui/yui3-gallery
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
Showing
7 changed files
with
486 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
builddir=../../../builder/componentbuild | ||
component=gallery-event-transition | ||
component.jsfiles=transition.js | ||
component.requires=event-synthetic |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
} | ||
}); |
Oops, something went wrong.