transitionize.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /**
  2. * Transitionize 0.0.3
  3. * https://github.com/abpetkov/transitionize
  4. *
  5. * Authored by Alexander Petkov
  6. * https://github.com/abpetkov
  7. *
  8. * Copyright 2013, Alexander Petkov
  9. * License: The MIT License (MIT)
  10. * http://opensource.org/licenses/MIT
  11. *
  12. */
  13. /**
  14. * Expose `Transitionize`.
  15. */
  16. module.exports = Transitionize;
  17. /**
  18. * Initialize new Transitionize.
  19. *
  20. * @param {Object} element
  21. * @param {Object} props
  22. * @api public
  23. */
  24. function Transitionize(element, props) {
  25. if (!(this instanceof Transitionize)) return new Transitionize(element, props);
  26. this.element = element;
  27. this.props = props || {};
  28. this.init();
  29. }
  30. /**
  31. * Detect if Safari.
  32. *
  33. * @returns {Boolean}
  34. * @api private
  35. */
  36. Transitionize.prototype.isSafari = function() {
  37. return (/Safari/).test(navigator.userAgent) && (/Apple Computer/).test(navigator.vendor);
  38. };
  39. /**
  40. * Loop though the object and push the keys and values in an array.
  41. * Apply the CSS3 transition to the element and prefix with -webkit- for Safari.
  42. *
  43. * @api private
  44. */
  45. Transitionize.prototype.init = function() {
  46. var transitions = [];
  47. for (var key in this.props) {
  48. transitions.push(key + ' ' + this.props[key]);
  49. }
  50. this.element.style.transition = transitions.join(', ');
  51. if (this.isSafari()) this.element.style.webkitTransition = transitions.join(', ');
  52. };