Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 
 

175 righe
4.6 KiB

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