64 lines
1.3 KiB
JavaScript
64 lines
1.3 KiB
JavaScript
|
|
||
|
|
/**
|
||
|
|
* Transitionize 0.0.3
|
||
|
|
* https://github.com/abpetkov/transitionize
|
||
|
|
*
|
||
|
|
* Authored by Alexander Petkov
|
||
|
|
* https://github.com/abpetkov
|
||
|
|
*
|
||
|
|
* Copyright 2013, Alexander Petkov
|
||
|
|
* License: The MIT License (MIT)
|
||
|
|
* http://opensource.org/licenses/MIT
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Expose `Transitionize`.
|
||
|
|
*/
|
||
|
|
|
||
|
|
module.exports = Transitionize;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Initialize new Transitionize.
|
||
|
|
*
|
||
|
|
* @param {Object} element
|
||
|
|
* @param {Object} props
|
||
|
|
* @api public
|
||
|
|
*/
|
||
|
|
|
||
|
|
function Transitionize(element, props) {
|
||
|
|
if (!(this instanceof Transitionize)) return new Transitionize(element, props);
|
||
|
|
|
||
|
|
this.element = element;
|
||
|
|
this.props = props || {};
|
||
|
|
this.init();
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Detect if Safari.
|
||
|
|
*
|
||
|
|
* @returns {Boolean}
|
||
|
|
* @api private
|
||
|
|
*/
|
||
|
|
|
||
|
|
Transitionize.prototype.isSafari = function() {
|
||
|
|
return (/Safari/).test(navigator.userAgent) && (/Apple Computer/).test(navigator.vendor);
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Loop though the object and push the keys and values in an array.
|
||
|
|
* Apply the CSS3 transition to the element and prefix with -webkit- for Safari.
|
||
|
|
*
|
||
|
|
* @api private
|
||
|
|
*/
|
||
|
|
|
||
|
|
Transitionize.prototype.init = function() {
|
||
|
|
var transitions = [];
|
||
|
|
|
||
|
|
for (var key in this.props) {
|
||
|
|
transitions.push(key + ' ' + this.props[key]);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.element.style.transition = transitions.join(', ');
|
||
|
|
if (this.isSafari()) this.element.style.webkitTransition = transitions.join(', ');
|
||
|
|
};
|