Skip to content

Instantly share code, notes, and snippets.

@cpojer
Created February 25, 2011 02:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cpojer/843287 to your computer and use it in GitHub Desktop.
Save cpojer/843287 to your computer and use it in GitHub Desktop.
WIP. Might be part of PowerTools! someday.
(function(){
// thanks @astolwijk
var key = (function(){
var list = ['', 'webkit', 'Moz', 'O', 'ms'],
element = document.html;
for (var i = 0; i < list.length; i++){
var prefix = list[i];
if (element.style[prefix ? prefix + 'TransitionProperty' : 'transitionProperty'] != null)
return prefix.toLowerCase();
}
return '';
})();
var Key = key.capitalize(),
Transition = 'Transition',
prefix = key ? '-' + key + '-' : '',
transformKey = prefix + 'transform',
transition = key ? key + Transition : 'transition',
animation = key ? key + 'Animation' : 'animation',
start = 'Start',
end = 'End',
iteration = 'Iteration',
events = Element.NativeEvents;
if (key == 'moz'){
animation = 'animation';
transition = 'transition';
start = start.toLowerCase();
end = end.toLowerCase();
iteration = iteration.toLowerCase();
}
events[transition + start] = 2;
events[transition + end] = 2;
events[animation + start] = 2;
events[animation + end] = 2;
events[animation + iteration] = 2;
Element.defineCustomEvent('animationStart', {
base: animation + start
}).defineCustomEvent('animationComplete', {
base: animation + end
}).defineCustomEvent('animationIteration', {
base: animation + iteration
}).defineCustomEvent('transitionComplete', {
base: transition + end
}).defineCustomEvent('transitionStart', {
base: transition + start
}).defineCustomEvent('transformComplete', {
base: transition + end,
condition: function(event){
return (event.event.propertyName == transformKey);
}
});
var methods = {},
// TODO: fill this list
useVendorPrefix = {
transform: 1
};
['property', 'timingFunction', 'duration', 'delay'].each(function(property){
var name = property.capitalize();
methods['get' + Transition + name] = function(){
return this.getStyle(Key + Transition + name) || '';
};
methods['set' + Transition + name] = function(value){
if (property == 'property') value = value.split(/\s*,\s*/).map(function(item){
return (useVendorPrefix[item] ? prefix : '') + item;
}).join(', ');
this.style[Key + Transition + name] = value || '';
return this;
};
});
Element.implement(methods).implement({
getTransitionProperties: function(){
return this.getTransitionProperty().split(/\s*,\s*/);
},
setTransition: function(properties){
if (!properties) properties = {};
if (properties.property != null) this.setTransitionProperty(properties.property);
if (properties.timingFunction != null) this.setTransitionTimingFunction(properties.timingFunction)
if (properties.duration != null) this.setTransitionDuration(properties.duration);
if (properties.delay != null) this.setTransitionDelay(properties.delay);
return this;
},
getTransition: function(){
return {
property: this.getTransitionProperty(),
timingFunction: this.getTransitionTimingFunction(),
duration: this.getTransitionDuration(),
delay: this.getTransitionDelay()
};
},
resetTransition: function(){
return this.setTransition({
property: '',
timingFunction: '',
duration: '',
delay: ''
});
},
hasTransition: function(){
return !!(this.getTransitionDuration() || this.getTransitionDelay());
},
cancelTransition: function(){
var properties = this.getTransitionProperties(),
property, length, i;
if (properties.contains('all')) properties = Array.slice(this.style); // copy because changing styles reorders
for (i = 0, length = properties.length; i < length; i++){
property = properties[i];
if (property.camelCase() == Key + Transition + 'Duration') continue;
this.setStyle(property, this.getComputedStyle(property));
}
return this;
},
// TODO allow object with translate/skew/scale etc.
transform: function(value){
return this.setStyle(transformKey, value);
}
});
}).call(this);
@assertchris
Copy link

Would be awesome to see this as part of Fx.Morph/Fx.Tween...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment