fix ant-design/ant-motion#323, opacity start value, svgDraw start loop bug

Author: jljsj33

examples/groupInStrict.html

@@ -0,0 +1 @@
+placeholder

examples/groupInStrict.js

@@ -0,0 +1,42 @@
+import { TweenOneGroup } from 'rc-tween-one';
+import React from 'react';
+import ReactDom from 'react-dom';
+import '../assets/index.less';
+
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.imgArray = [
+      'https://os.alipayobjects.com/rmsportal/IhCNTqPpLeTNnwr.jpg',
+      'https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg',
+    ];
+    this.state = {
+      int: 0,
+    };
+  }
+
+  onClick = () => {
+    let int = this.state.int;
+    int++;
+    if (int >= this.imgArray.length) {
+      int = 0;
+    }
+    this.setState({ int });
+  }
+
+  render() {
+    return (
+      <React.StrictMode>
+        <div>
+        <button onClick={this.onClick}>切换</button>
+        <TweenOneGroup style={{ position: 'relative' }}>
+          <div key={this.state.int}>
+            <img src={this.imgArray[this.state.int]} height="200" alt="img"/>
+          </div>
+        </TweenOneGroup>
+      </div>
+      </React.StrictMode>
+      );
+  }
+}
+ReactDom.render(<Demo />, document.getElementById('__react-content'));

examples/simple.js

@@ -3,19 +3,19 @@ import React from 'react';
 import ReactDom from 'react-dom';
 import '../assets/index.less';
 
-class Demo extends React.Component {
-  bbb = (e) => {
+function Demo() {
+  const bbb = (e) => {
     console.log(e);// eslint-disable-line no-console
   }
 
-  render() {
-    return (<Tween
+  return (
+    <Tween
       animation={{ x: 300 }}
-      onChange={this.bbb}
+      onChange={bbb}
       style={{ opacity: 1, height: 100, display: 'inline-block' }}
     >
       <div>执行动效</div>
-    </Tween>);
-  }
+    </Tween>
+  );
 }
 ReactDom.render(<Demo />, document.getElementById('__react-content'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-tween-one",
-  "version": "2.6.8",
+  "version": "2.7.0",
   "description": "tween-one anim component for react",
   "keywords": [
     "react",

src/Tween.js

@@ -202,7 +202,8 @@ p.getAnimStartData = function (item) {
     if (this.attr === 'attr') {
       // 除了d和这points外的标签动画；
       const attribute = this.getValue(_key);
-      let data = attribute === 'null' || !attribute ? 0 : attribute;
+      const s = _key.match(/opacity/ig) ? 1 : 0
+      let data = attribute === 'null' || !attribute ? s : attribute;
       if (_key.match(/color/i) || _key === 'stroke' || _key === 'fill') {
         data = !data && _key === 'stroke' ? 'rgba(255, 255, 255, 0)' : data;
         data = parseColor(data);

src/TweenOne.jsx

@@ -125,24 +125,19 @@ class TweenOne extends Component {
     this.updateAnim = false;
     this.repeatNum = 0;
     this.forced = {};
-    this.currentRef = null;
     this.setForcedJudg(props);
     this.state = {
       $self: this,
     };
   }
 
   componentDidMount() {
-    this.dom = ReactDom.findDOMNode(this);
     if (this.dom && this.dom.nodeName !== '#text') {
       this.start();
     }
   }
 
   componentDidUpdate() {
-    if (!this.dom) {
-      this.dom = ReactDom.findDOMNode(this);
-    }
     // 样式更新了后再执行动画；
     if (this.updateAnim && this.dom && this.dom.nodeName !== '#text') {
       if (this.tween) {
@@ -338,6 +333,9 @@ class TweenOne extends Component {
     });
     // component 为空时调用子级的。。
     const { className, children } = props;
+    const ref = (c) => {
+      this.dom = c && c.props ? ReactDom.findDOMNode(c) : c;
+    };
     if (!component && typeof children !== 'string') {
       if (!children) {
         return children;
@@ -347,12 +345,14 @@ class TweenOne extends Component {
       // 合并 style 与 className。
       const newStyle = { ...childStyle, ...props.style };
       const newClassName = className ? `${className} ${childClass}` : childClass;
-      return React.cloneElement(children, { style: newStyle, className: newClassName });
+      return React.cloneElement(children, { 
+        style: newStyle,
+        ref,
+        className: newClassName,
+      });
     }
     return React.createElement(component, {
-      ref: (c) => {
-        this.currentRef = c;
-      },
+      ref,
       ...props,
       ...componentProps
     });

src/TweenOneGroup.jsx

@@ -12,8 +12,7 @@ import {
   findChildInChildrenByKey,
 } from './util';
 
-function noop() {
-}
+function noop() {}
 
 class TweenOneGroup extends Component {
   static getDerivedStateFromProps(props, { prevProps, $self }) {
@@ -68,10 +67,12 @@ class TweenOneGroup extends Component {
       delete this.isTween[key];
       if (classIsSvg) {
         tag.className.baseVal = tag.className.baseVal
-          .replace(this.props.animatingClassName[isEnter ? 0 : 1], '').trim();
+          .replace(this.props.animatingClassName[isEnter ? 0 : 1], '')
+          .trim();
       } else {
         tag.className = tag.className
-          .replace(this.props.animatingClassName[isEnter ? 0 : 1], '').trim();
+          .replace(this.props.animatingClassName[isEnter ? 0 : 1], '')
+          .trim();
       }
       if (type === 'enter') {
         this.keysToEnter.splice(this.keysToEnter.indexOf(key), 1);
@@ -88,40 +89,47 @@ class TweenOneGroup extends Component {
               delete this.saveTweenTag[$key];
             }
           });
-          this.setState({
-            children: this.currentChildren,
-          }, this.reAnimQueue);
+          this.setState(
+            {
+              children: this.currentChildren,
+            },
+            this.reAnimQueue,
+          );
         }
       }
       const _obj = { key, type };
       this.props.onEnd(_obj);
     }
-  }
+  };
 
   setClassName = (name, isEnter) => {
     let className = name.replace(this.props.animatingClassName[isEnter ? 1 : 0], '').trim();
     if (className.indexOf(this.props.animatingClassName[isEnter ? 0 : 1]) === -1) {
       className = `${className} ${this.props.animatingClassName[isEnter ? 0 : 1]}`.trim();
     }
     return className;
-  }
+  };
 
   getTweenChild = (child, props = {}) => {
     const key = child.key;
-    this.saveTweenTag[key] = React.createElement(TweenOne, {
-      ...props,
-      key,
-      component: null,
-    }, child);
+    this.saveTweenTag[key] = React.createElement(
+      TweenOne,
+      {
+        ...props,
+        key,
+        component: null,
+      },
+      child,
+    );
     return this.saveTweenTag[key];
-  }
+  };
 
   getCoverAnimation = (child, i, type) => {
     let animation;
     animation = type === 'leave' ? this.props.leave : this.props.enter;
     if (type === 'appear') {
       const appear = transformArguments(this.props.appear, child.key, i);
-      animation = appear && this.props.enter || null;
+      animation = (appear && this.props.enter) || null;
     }
     const animate = transformArguments(animation, child.key, i);
     const onChange = this.onChange.bind(this, animate, child.key, type);
@@ -131,56 +139,62 @@ class TweenOneGroup extends Component {
       onChange,
       resetStyle: this.props.resetStyle,
     };
-    if (this.keysToEnter.concat(this.keysToLeave).indexOf(child.key) >= 0
-      || !this.onEnterBool && animation) {
+    if (
+      this.keysToEnter.concat(this.keysToLeave).indexOf(child.key) >= 0 ||
+      (!this.onEnterBool && animation)
+    ) {
       if (!this.saveTweenTag[child.key]) {
         this.isTween[child.key] = type;
       }
     }
     const children = this.getTweenChild(child, props);
     return children;
-  }
+  };
 
   getChildrenToRender = children => {
     return children.map((child, i) => {
       if (!child || !child.key) {
         return child;
       }
       const key = child.key;
-
       if (this.keysToLeave.indexOf(key) >= 0) {
         return this.getCoverAnimation(child, i, 'leave');
-      } else if (((this.keysToEnter.indexOf(key) >= 0) ||
-        (this.isTween[key] && this.keysToLeave.indexOf(key) === -1)) &&
-        !(this.isTween[key] === 'enter' && this.saveTweenTag[key])) {
+      } else if (
+        (this.keysToEnter.indexOf(key) >= 0 ||
+          (this.isTween[key] && this.keysToLeave.indexOf(key) === -1)) &&
+        !(this.isTween[key] === 'enter' && this.saveTweenTag[key])
+      ) {
         /**
-        * 1. 在 key 在 enter 里。
-        * 2. 出场未结束，触发进场, this.isTween[key] 为 leave, key 在 enter 里。
-        * 3. 状态为 enter 且 tweenTag 里有值时，不执行重载动画属性，直接调用 tweenTag 里的。
-        */
+         * 1. 在 key 在 enter 里。
+         * 2. 出场未结束，触发进场, this.isTween[key] 为 leave, key 在 enter 里。
+         * 3. 状态为 enter 且 tweenTag 里有值时，不执行重载动画属性，直接调用 tweenTag 里的。
+         */
         return this.getCoverAnimation(child, i, 'enter');
       } else if (!this.onEnterBool) {
         return this.getCoverAnimation(child, i, 'appear');
       }
       return this.saveTweenTag[key];
     });
-  }
+  };
 
   reAnimQueue = () => {
     if (!Object.keys(this.isTween).length && this.animQueue.length) {
-      const children = this.changeChildren(this.animQueue[this.animQueue.length - 1], this.state.children);
+      const children = this.changeChildren(
+        this.animQueue[this.animQueue.length - 1],
+        this.state.children,
+      );
       this.setState({
         children,
       });
       this.animQueue = [];
     }
-  }
+  };
 
   changeChildren(nextChildren, currentChildren) {
     const newChildren = mergeChildren(currentChildren, nextChildren);
     this.keysToEnter = [];
     this.keysToLeave = [];
-    nextChildren.forEach((c) => {
+    nextChildren.forEach(c => {
       if (!c) {
         return;
       }
@@ -195,7 +209,7 @@ class TweenOneGroup extends Component {
       }
     });
 
-    currentChildren.forEach((c) => {
+    currentChildren.forEach(c => {
       if (!c) {
         return;
       }
@@ -206,31 +220,30 @@ class TweenOneGroup extends Component {
         delete this.saveTweenTag[key];
       }
     });
-    this.currentChildren = newChildren;
     return newChildren;
   }
 
   render() {
-    const childrenToRender = this.getChildrenToRender(this.state.children);
-    if (!this.props.component) {
+    const { children } = this.state;
+    // fix in strict mode https://github.com/ant-design/ant-motion/issues/323;
+    this.currentChildren = children;
+    const childrenToRender = this.getChildrenToRender(children);
+    const {
+      component,
+      componentProps,
+      appear,
+      enter,
+      leave,
+      animatingClassName,
+      onEnd,
+      exclusive,
+      resetStyle,
+      ...props
+    } = this.props;
+    if (!component) {
       return childrenToRender[0] || null;
     }
-    const componentProps = { ...this.props };
-    [
-      'component',
-      'componentProps',
-      'appear',
-      'enter',
-      'leave',
-      'animatingClassName',
-      'onEnd',
-      'exclusive',
-      'resetStyle',
-    ].forEach(key => delete componentProps[key]);
-    return createElement(this.props.component,
-      { ...componentProps, ...this.props.componentProps },
-      childrenToRender
-    );
+    return createElement(component, { ...props, ...componentProps }, childrenToRender);
   }
 }
 

src/plugin/SvgDrawPlugin.jsx

@@ -65,6 +65,9 @@ SvgDrawPlugin.prototype = {
     return Math.PI * (3 * (rx + ry) - Math.sqrt((3 * rx + ry) * (3 * ry + rx)));
   },
   getAnimStart(computedStyle) {
+    if (Object.keys(this.start).length) {
+      return;
+    }
     const getAttribute = (str) => (this.target.getAttribute(str));
     switch (this.tagName) {
       case 'circle':