Possiamo evitare il problema dei prefissi dei browser nelle transizioni e trasformazioni CSS creando un plugin jQuery.
La soluzione è la seguente:
(function( $ ) {
var CSS = {} || Object.create( null );
CSS.fn = {
properties: {
transform: [ "transform", "msTransform", "webkitTransform", "mozTransform", "oTransform" ],
transition: [ "transition", "msTransition", "webkitTransition", "mozTransition", "oTransition" ]
},
_getSupportedProperty: function( props ) {
var root = document.documentElement;
for ( var i = 0; i < props.length; ++i ) {
var prop = props[i];
if ( prop in root.style ) {
return prop;
}
}
},
transform: function( element, value ) {
var self = this;
var prop = self._getSupportedProperty( self.properties.transform );
element.style[prop] = value;
},
transition: function( element, value ) {
var self = this;
var prop = self._getSupportedProperty( self.properties.transition );
element.style[prop] = value;
}
};
$.fn.transition = function( value ) {
return this.each(function() {
var element = this;
CSS.fn.transition( element, value );
});
};
$.fn.transform = function( value ) {
return this.each(function() {
var element = this;
CSS.fn.transform( element, value );
});
};
})( jQuery );