From 00fac07d9e8a307500fe4493862f1fa740fc0ecd Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 26 Feb 2017 19:08:36 +0800
Subject: [PATCH] refactor requestAnimationFrame

---
 components/_util/getRequestAnimationFrame.tsx |  1 -
 components/_util/openAnimation.tsx            | 13 +++++++++++--
 components/button/button.tsx                  |  6 ++++--
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/components/_util/getRequestAnimationFrame.tsx b/components/_util/getRequestAnimationFrame.tsx
index 525335dea3..1cf9af74b8 100644
--- a/components/_util/getRequestAnimationFrame.tsx
+++ b/components/_util/getRequestAnimationFrame.tsx
@@ -27,7 +27,6 @@ export default function getRequestAnimationFrame() {
 }
 
 export function cancelRequestAnimationFrame(id) {
-
   if (typeof window === 'undefined') {
     return null;
   }
diff --git a/components/_util/openAnimation.tsx b/components/_util/openAnimation.tsx
index 8f117c17e6..4ce25c3dc0 100644
--- a/components/_util/openAnimation.tsx
+++ b/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();
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 0b8afd0e80..91dc11b709 100644
--- a/components/button/button.tsx
+++ b/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);