transitionDuration 修正

+ close ant-design/ant-design#3784 + 当两次更新间隔小于 600ms 时，取消路径动画，避免 bug
RaoHai · Nov 11, 2016 · 2b825a9 · 2b825a9
1 parent 820b7ba
commit 2b825a9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/src/Circle.js b/src/Circle.js
@@ -6,6 +6,14 @@ export default React.createClass({
   getDefaultProps() {
     return defaultProps;
   },
+  componentDidUpdate() {
+    const now = Date.now();
+    this.refs.path.style.transitionDuration = '0.6s, 0.6s';
+    if (this.prevTimeStamp && now - this.prevTimeStamp < 600) {
+      this.refs.path.style.transitionDuration = '0s, 0s';
+    }
+    this.prevTimeStamp = Date.now();
+  },
   render() {
     const {
       prefixCls, strokeWidth, trailWidth, strokeColor,
@@ -45,6 +53,7 @@ export default React.createClass({
           stroke={strokeColor}
           strokeWidth={strokeWidth}
           fillOpacity="0"
+          ref="path"
           style={pathStyle}
         />
       </svg>

diff --git a/src/Line.jsx b/src/Line.jsx
@@ -6,6 +6,14 @@ export default React.createClass({
   getDefaultProps() {
     return defaultProps;
   },
+  componentDidUpdate() {
+    const now = Date.now();
+    this.refs.path.style.transitionDuration = '0.6s, 0.6s';
+    if (this.prevTimeStamp && now - this.prevTimeStamp < 600) {
+      this.refs.path.style.transitionDuration = '0s, 0s';
+    }
+    this.prevTimeStamp = Date.now();
+  },
   render() {
     const {
       prefixCls, strokeWidth, trailWidth, strokeColor,
@@ -47,6 +55,7 @@ export default React.createClass({
           stroke={strokeColor}
           strokeWidth={strokeWidth}
           fillOpacity="0"
+          ref="path"
           style={pathStyle}
         />
       </svg>