index.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. import _typeof from "@babel/runtime/helpers/esm/typeof";
  2. // https://github.com/yiminghe/css-animation 1.5.0
  3. import Event from './Event';
  4. import classes from '../component-classes';
  5. import { requestAnimationTimeout, cancelAnimationTimeout } from '../requestAnimationTimeout';
  6. import { inBrowser } from '../env';
  7. var isCssAnimationSupported = Event.endEvents.length !== 0;
  8. var capitalPrefixes = ['Webkit', 'Moz', 'O',
  9. // ms is special .... !
  10. 'ms'];
  11. var prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', ''];
  12. function getStyleProperty(node, name) {
  13. if (inBrowser) return '';
  14. // old ff need null, https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
  15. var style = window.getComputedStyle(node, null);
  16. var ret = '';
  17. for (var i = 0; i < prefixes.length; i++) {
  18. ret = style.getPropertyValue(prefixes[i] + name);
  19. if (ret) {
  20. break;
  21. }
  22. }
  23. return ret;
  24. }
  25. function fixBrowserByTimeout(node) {
  26. if (isCssAnimationSupported) {
  27. var transitionDelay = parseFloat(getStyleProperty(node, 'transition-delay')) || 0;
  28. var transitionDuration = parseFloat(getStyleProperty(node, 'transition-duration')) || 0;
  29. var animationDelay = parseFloat(getStyleProperty(node, 'animation-delay')) || 0;
  30. var animationDuration = parseFloat(getStyleProperty(node, 'animation-duration')) || 0;
  31. var time = Math.max(transitionDuration + transitionDelay, animationDuration + animationDelay);
  32. // sometimes, browser bug
  33. node.rcEndAnimTimeout = setTimeout(function () {
  34. node.rcEndAnimTimeout = null;
  35. if (node.rcEndListener) {
  36. node.rcEndListener();
  37. }
  38. }, time * 1000 + 200);
  39. }
  40. }
  41. function clearBrowserBugTimeout(node) {
  42. if (node.rcEndAnimTimeout) {
  43. clearTimeout(node.rcEndAnimTimeout);
  44. node.rcEndAnimTimeout = null;
  45. }
  46. }
  47. var cssAnimation = function cssAnimation(node, transitionName, endCallback) {
  48. var nameIsObj = _typeof(transitionName) === 'object';
  49. var className = nameIsObj ? transitionName.name : transitionName;
  50. var activeClassName = nameIsObj ? transitionName.active : "".concat(transitionName, "-active");
  51. var end = endCallback;
  52. var start;
  53. var active;
  54. var nodeClasses = classes(node);
  55. if (endCallback && Object.prototype.toString.call(endCallback) === '[object Object]') {
  56. end = endCallback.end;
  57. start = endCallback.start;
  58. active = endCallback.active;
  59. }
  60. if (node.rcEndListener) {
  61. node.rcEndListener();
  62. }
  63. node.rcEndListener = function (e) {
  64. if (e && e.target !== node) {
  65. return;
  66. }
  67. if (node.rcAnimTimeout) {
  68. cancelAnimationTimeout(node.rcAnimTimeout);
  69. node.rcAnimTimeout = null;
  70. }
  71. clearBrowserBugTimeout(node);
  72. nodeClasses.remove(className);
  73. nodeClasses.remove(activeClassName);
  74. Event.removeEndEventListener(node, node.rcEndListener);
  75. node.rcEndListener = null;
  76. // Usually this optional end is used for informing an owner of
  77. // a leave animation and telling it to remove the child.
  78. if (end) {
  79. end();
  80. }
  81. };
  82. Event.addEndEventListener(node, node.rcEndListener);
  83. if (start) {
  84. start();
  85. }
  86. nodeClasses.add(className);
  87. node.rcAnimTimeout = requestAnimationTimeout(function () {
  88. node.rcAnimTimeout = null;
  89. nodeClasses.add(className);
  90. nodeClasses.add(activeClassName);
  91. if (active) {
  92. requestAnimationTimeout(active, 0);
  93. }
  94. fixBrowserByTimeout(node);
  95. // 30ms for firefox
  96. }, 30);
  97. return {
  98. stop: function stop() {
  99. if (node.rcEndListener) {
  100. node.rcEndListener();
  101. }
  102. }
  103. };
  104. };
  105. cssAnimation.style = function (node, style, callback) {
  106. if (node.rcEndListener) {
  107. node.rcEndListener();
  108. }
  109. node.rcEndListener = function (e) {
  110. if (e && e.target !== node) {
  111. return;
  112. }
  113. if (node.rcAnimTimeout) {
  114. cancelAnimationTimeout(node.rcAnimTimeout);
  115. node.rcAnimTimeout = null;
  116. }
  117. clearBrowserBugTimeout(node);
  118. Event.removeEndEventListener(node, node.rcEndListener);
  119. node.rcEndListener = null;
  120. // Usually this optional callback is used for informing an owner of
  121. // a leave animation and telling it to remove the child.
  122. if (callback) {
  123. callback();
  124. }
  125. };
  126. Event.addEndEventListener(node, node.rcEndListener);
  127. node.rcAnimTimeout = requestAnimationTimeout(function () {
  128. for (var s in style) {
  129. if (style.hasOwnProperty(s)) {
  130. node.style[s] = style[s];
  131. }
  132. }
  133. node.rcAnimTimeout = null;
  134. fixBrowserByTimeout(node);
  135. }, 0);
  136. };
  137. cssAnimation.setTransition = function (node, p, value) {
  138. var property = p;
  139. var v = value;
  140. if (value === undefined) {
  141. v = property;
  142. property = '';
  143. }
  144. property = property || '';
  145. capitalPrefixes.forEach(function (prefix) {
  146. node.style["".concat(prefix, "Transition").concat(property)] = v;
  147. });
  148. };
  149. cssAnimation.isCssAnimationSupported = isCssAnimationSupported;
  150. export { isCssAnimationSupported };
  151. export default cssAnimation;