Skip to content

Instantly share code, notes, and snippets.

@pgarciacamou
Last active August 29, 2015 14:15
Show Gist options
  • Save pgarciacamou/586a819099c715a52a06 to your computer and use it in GitHub Desktop.
Save pgarciacamou/586a819099c715a52a06 to your computer and use it in GitHub Desktop.
Transition detector constructor. Detects when an element had a transition and executes a callback when it ends.
var Transition = (function (){
var transitionEvent = (function whichTransitionEvent(){
var t, el = document.createElement("fakeelement")
,transitions = {
"WebkitTransition": "webkitTransitionEnd",
"MozTransition": "transitionend",
"OTransition": "oTransitionEnd",
"transition": "transitionend"
};
for (t in transitions){
if (el.style[t] !== undefined) return transitions[t];
}
})();
function Transition(elem){
this.elem = elem;
// this.options = {
// autoChangeState: true
// };
elem.addEventListener(transitionEvent, function (){
this.isExecuting = false;
return this.onTransitionEnd && this.onTransitionEnd();
}.bind(this));
}
Object.defineProperties(Transition.prototype, {
'start': {
value: function (){
if(this.onTransitionStart) this.onTransitionStart();
this.isExecuting = true;
return this;
}
}
,'before': {
value: function (callback){
this.onTransitionStart = callback;
return this;
}
}
// ,'config': {
// value: function (options){
// this.options.autoChangeState = options.autoChangeState || this.options.autoChangeState;
// return this;
// }
// }
,'after': {
value: function (callback){
this.onTransitionEnd = callback;
return this;
}
}
});
return Transition;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment