Event.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. var START_EVENT_NAME_MAP = {
  2. transitionstart: {
  3. transition: 'transitionstart',
  4. WebkitTransition: 'webkitTransitionStart',
  5. MozTransition: 'mozTransitionStart',
  6. OTransition: 'oTransitionStart',
  7. msTransition: 'MSTransitionStart'
  8. },
  9. animationstart: {
  10. animation: 'animationstart',
  11. WebkitAnimation: 'webkitAnimationStart',
  12. MozAnimation: 'mozAnimationStart',
  13. OAnimation: 'oAnimationStart',
  14. msAnimation: 'MSAnimationStart'
  15. }
  16. };
  17. var END_EVENT_NAME_MAP = {
  18. transitionend: {
  19. transition: 'transitionend',
  20. WebkitTransition: 'webkitTransitionEnd',
  21. MozTransition: 'mozTransitionEnd',
  22. OTransition: 'oTransitionEnd',
  23. msTransition: 'MSTransitionEnd'
  24. },
  25. animationend: {
  26. animation: 'animationend',
  27. WebkitAnimation: 'webkitAnimationEnd',
  28. MozAnimation: 'mozAnimationEnd',
  29. OAnimation: 'oAnimationEnd',
  30. msAnimation: 'MSAnimationEnd'
  31. }
  32. };
  33. var startEvents = [];
  34. var endEvents = [];
  35. function detectEvents() {
  36. var testEl = document.createElement('div');
  37. var style = testEl.style;
  38. if (!('AnimationEvent' in window)) {
  39. delete START_EVENT_NAME_MAP.animationstart.animation;
  40. delete END_EVENT_NAME_MAP.animationend.animation;
  41. }
  42. if (!('TransitionEvent' in window)) {
  43. delete START_EVENT_NAME_MAP.transitionstart.transition;
  44. delete END_EVENT_NAME_MAP.transitionend.transition;
  45. }
  46. function process(EVENT_NAME_MAP, events) {
  47. for (var baseEventName in EVENT_NAME_MAP) {
  48. if (EVENT_NAME_MAP.hasOwnProperty(baseEventName)) {
  49. var baseEvents = EVENT_NAME_MAP[baseEventName];
  50. for (var styleName in baseEvents) {
  51. if (styleName in style) {
  52. events.push(baseEvents[styleName]);
  53. break;
  54. }
  55. }
  56. }
  57. }
  58. }
  59. process(START_EVENT_NAME_MAP, startEvents);
  60. process(END_EVENT_NAME_MAP, endEvents);
  61. }
  62. if (typeof window !== 'undefined' && typeof document !== 'undefined') {
  63. detectEvents();
  64. }
  65. function addEventListener(node, eventName, eventListener) {
  66. node.addEventListener(eventName, eventListener, false);
  67. }
  68. function removeEventListener(node, eventName, eventListener) {
  69. node.removeEventListener(eventName, eventListener, false);
  70. }
  71. var TransitionEvents = {
  72. // Start events
  73. startEvents: startEvents,
  74. addStartEventListener: function addStartEventListener(node, eventListener) {
  75. if (startEvents.length === 0) {
  76. setTimeout(eventListener, 0);
  77. return;
  78. }
  79. startEvents.forEach(function (startEvent) {
  80. addEventListener(node, startEvent, eventListener);
  81. });
  82. },
  83. removeStartEventListener: function removeStartEventListener(node, eventListener) {
  84. if (startEvents.length === 0) {
  85. return;
  86. }
  87. startEvents.forEach(function (startEvent) {
  88. removeEventListener(node, startEvent, eventListener);
  89. });
  90. },
  91. // End events
  92. endEvents: endEvents,
  93. addEndEventListener: function addEndEventListener(node, eventListener) {
  94. if (endEvents.length === 0) {
  95. setTimeout(eventListener, 0);
  96. return;
  97. }
  98. endEvents.forEach(function (endEvent) {
  99. addEventListener(node, endEvent, eventListener);
  100. });
  101. },
  102. removeEndEventListener: function removeEndEventListener(node, eventListener) {
  103. if (endEvents.length === 0) {
  104. return;
  105. }
  106. endEvents.forEach(function (endEvent) {
  107. removeEventListener(node, endEvent, eventListener);
  108. });
  109. }
  110. };
  111. export default TransitionEvents;