refactor requestAnimationFrame

components/_util/getRequestAnimationFrame.tsx

@@ -27,7 +27,6 @@ export default function getRequestAnimationFrame() {
 }
 
 export function cancelRequestAnimationFrame(id) {
-
   if (typeof window === 'undefined') {
     return null;
   }

components/_util/openAnimation.tsx

@@ -1,8 +1,11 @@
 import cssAnimation from 'css-animation';
-import getRequestAnimationFrame from './getRequestAnimationFrame';
+import getRequestAnimationFrame, { cancelRequestAnimationFrame } from './getRequestAnimationFrame';
+
+const reqAnimFrame = getRequestAnimationFrame();
 
 function animate(node, show, done) {
   let height;
+  let requestAnimationFrameId;
   return cssAnimation(node, 'ant-motion-collapse', {
     start() {
       if (!show) {
@@ -15,12 +18,18 @@ function animate(node, show, done) {
       }
     },
     active() {
-      getRequestAnimationFrame()(() => {
+      if (requestAnimationFrameId) {
+        cancelRequestAnimationFrame(requestAnimationFrameId);
+      }
+      requestAnimationFrameId = reqAnimFrame(() => {
         node.style.height = `${show ? height : 0}px`;
         node.style.opacity = show ? 1 : 0;
       });
     },
     end() {
+      if (requestAnimationFrameId) {
+        cancelRequestAnimationFrame(requestAnimationFrameId);
+      }
       node.style.height = '';
       node.style.opacity = '';
       done();

components/button/button.tsx

@@ -3,7 +3,9 @@ import classNames from 'classnames';
 import { findDOMNode } from 'react-dom';
 import Icon from '../icon';
 import omit from 'omit.js';
+import getRequestAnimationFrame, { cancelRequestAnimationFrame } from '../_util/getRequestAnimationFrame';
 
+const reqAnimFrame = getRequestAnimationFrame();
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
 function isString(str) {
@@ -94,7 +96,7 @@ export default class Button extends React.Component<ButtonProps, any> {
 
   componentWillUnmount() {
     if (this.clickedTimeout) {
-      clearTimeout(this.clickedTimeout);
+      cancelRequestAnimationFrame(this.clickedTimeout);
     }
     if (this.timeout) {
       clearTimeout(this.timeout);
@@ -112,7 +114,7 @@ export default class Button extends React.Component<ButtonProps, any> {
     // Add click effect
     const buttonNode = findDOMNode(this);
     this.clearButton(buttonNode);
-    this.clickedTimeout = setTimeout(() => buttonNode.className += ` ${this.props.prefixCls}-clicked`, 10);
+    this.clickedTimeout = reqAnimFrame(() => buttonNode.className += ` ${this.props.prefixCls}-clicked`);
     clearTimeout(this.timeout);
     this.timeout = setTimeout(() => this.clearButton(buttonNode), 500);