fix component is func bug

Author: jljsj33

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-tween-one",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "tween-one anim component for react",
   "keywords": [
     "react",
@@ -71,7 +71,6 @@
     "core-js": "^2.5.7",
     "expect.js": "0.3.x",
     "precommit-hook": "^3.0.0",
-    "rc-queue-anim": "^1.6.1",
     "rc-scroll-anim": "2.x",
     "rc-test": "6.x",
     "rc-tools": "8.x",

src/TweenOne.jsx

@@ -7,8 +7,7 @@ import { objectEqual } from './util';
 import Tween from './Tween';
 import ticker from './ticker';
 
-function noop() {
-}
+function noop() {}
 
 const perFrame = Math.round(1000 / 60);
 const objectOrArray = PropTypes.oneOfType([PropTypes.object, PropTypes.array]);
@@ -65,7 +64,6 @@ class TweenOne extends Component {
       // 跳帧事件 moment;
       const nextMoment = props.moment;
       if (typeof nextMoment === 'number' && nextMoment !== prevProps.moment) {
-
         if ($self.tween && !$self.updateAnim) {
           $self.startMoment = nextMoment;
           $self.startTime = ticker.time;
@@ -105,16 +103,19 @@ class TweenOne extends Component {
       if (!styleEqual) {
         // 在动画时更改了 style, 作为更改开始数值。
         if ($self.tween) {
-          $self.tween.reStart(props.style, prevProps.style,
-            $self.tween.progressTime < $self.tween.totalTime);
+          $self.tween.reStart(
+            props.style,
+            prevProps.style,
+            $self.tween.progressTime < $self.tween.totalTime,
+          );
           if ($self.paused) {
             $self.raf();
           }
         }
       }
       $self.setForcedJudg(props);
     }
-    return nextState;// eslint-disable-line
+    return nextState; // eslint-disable-line
   }
 
   constructor(props) {
@@ -132,12 +133,14 @@ class TweenOne extends Component {
   }
 
   componentDidMount() {
+    this.setDom()
     if (this.dom && this.dom.nodeName !== '#text') {
       this.start();
     }
   }
 
   componentDidUpdate() {
+    this.setDom();
     // 样式更新了后再执行动画；
     if (this.updateAnim && this.dom && this.dom.nodeName !== '#text') {
       if (this.tween) {
@@ -166,7 +169,7 @@ class TweenOne extends Component {
    * 暂时方案: 在组件里添加判断用的值。
    */
 
-  setForcedJudg = (props) => {
+  setForcedJudg = props => {
     Object.keys(this.forced).forEach(key => {
       delete this[key];
       delete this.forced[key];
@@ -179,12 +182,16 @@ class TweenOne extends Component {
         }
       });
     }
-  }
+  };
 
-  setDefault = (props) => {
+  setDefault = props => {
     this.moment = props.moment || 0;
     this.startMoment = props.moment || 0;
     this.startTime = ticker.time;
+  };
+
+  setDom = () => {
+    this.dom = this.dom || ReactDom.findDOMNode(this);
   }
 
   restart = () => {
@@ -197,15 +204,14 @@ class TweenOne extends Component {
     this.tween.reverseStartTime = this.startMoment;
     this.raf();
     this.play();
-  }
+  };
 
   start = () => {
     this.updateAnim = false;
     const props = this.props;
     if (props.animation && Object.keys(props.animation).length) {
       this.setDefault(props);
-      this.tween = new Tween(this.dom, props.animation,
-        props.attr);
+      this.tween = new Tween(this.dom, props.animation, props.attr);
       this.tween.reverse = this.reverse;
       // 预先注册 raf, 初始动画数值。
       this.raf();
@@ -214,15 +220,15 @@ class TweenOne extends Component {
     } else {
       this.tween = null;
     }
-  }
+  };
 
   play = () => {
     this.cancelRequestAnimationFrame();
     if (this.paused) {
       return;
     }
     this.rafID = ticker.add(this.raf);
-  }
+  };
 
   frame = () => {
     const { yoyo } = this.props;
@@ -238,14 +244,15 @@ class TweenOne extends Component {
     let repeatNum = Math.floor(moment / this.tween.totalTime) || 0;
     repeatNum = repeatNum > repeat ? repeat : repeatNum;
     let tweenMoment = moment - this.tween.totalTime * repeatNum;
-    tweenMoment = tweenMoment < perFrame && !this.reverse &&
-      totalTime >= perFrame ? 0 : tweenMoment;
+    tweenMoment =
+      tweenMoment < perFrame && !this.reverse && totalTime >= perFrame ? 0 : tweenMoment;
     if (repeat && moment && moment - this.tween.totalTime * repeatNum < perFrame) {
       // 在重置样式之前补 complete；
       this.tween.frame(this.tween.totalTime * repeatNum);
     }
-    if (moment < this.moment && !this.reverse ||
-      repeat !== 0 && repeatNum && repeatNum !== this.repeatNum
+    if (
+      (moment < this.moment && !this.reverse) ||
+      (repeat !== 0 && repeatNum && repeatNum !== this.repeatNum)
     ) {
       // 在 form 状态下，暂停时拉 moment 时，start 有值，，往返方向播放时，在 delay 的时间没有处理。。
       // 与上面的处理一样，删除 start ，重新走一遍 start。。
@@ -256,22 +263,18 @@ class TweenOne extends Component {
     if (yoyoReverse) {
       tweenMoment = this.tween.totalTime - tweenMoment;
     }
-    this.tween.onChange = (e) => {
+    this.tween.onChange = e => {
       const cb = {
         ...e,
         timelineMode: '',
       };
 
       if (
-        (this.moment === this.startMoment &&
-          (!this.reverse && !e.index && e.mode === 'onStart') ||
-          this.reverse)
+        (this.moment === this.startMoment && !this.reverse && !e.index && e.mode === 'onStart') ||
+        this.reverse
       ) {
         cb.timelineMode = 'onTimelineStart';
-      } else if (
-        moment >= totalTime && !this.reverse ||
-        !moment && this.reverse
-      ) {
+      } else if ((moment >= totalTime && !this.reverse) || (!moment && this.reverse)) {
         cb.timelineMode = 'onTimelineComplete';
       } else if (repeatNum !== this.timelineRepeatNum) {
         cb.timelineMode = 'onTimelineRepeat';
@@ -284,7 +287,7 @@ class TweenOne extends Component {
     this.moment = moment;
     this.repeatNum = repeatNum;
     this.tween.frame(tweenMoment);
-  }
+  };
 
   raf = () => {
     const tween = this.tween;
@@ -295,18 +298,20 @@ class TweenOne extends Component {
     }
     const { repeat } = this.props;
     const totalTime = repeat === -1 ? Number.MAX_VALUE : this.tween.totalTime * (repeat + 1);
-    if ((this.moment >= totalTime && !this.reverse)
-      || this.paused || (this.reverse && this.moment === 0)
+    if (
+      (this.moment >= totalTime && !this.reverse) ||
+      this.paused ||
+      (this.reverse && this.moment === 0)
     ) {
       return this.cancelRequestAnimationFrame();
     }
     return null;
-  }
+  };
 
   cancelRequestAnimationFrame = () => {
     ticker.clear(this.rafID);
     this.rafID = -1;
-  }
+  };
 
   render() {
     const {
@@ -333,8 +338,8 @@ class TweenOne extends Component {
     });
     // component 为空时调用子级的。。
     const { className, children } = props;
-    const ref = (c) => {
-      this.dom = c && c.props ? ReactDom.findDOMNode(c) : c;
+    const ref = c => {
+      this.dom = c;
     };
     if (!component && typeof children !== 'string') {
       if (!children) {
@@ -345,16 +350,16 @@ class TweenOne extends Component {
       // 合并 style 与 className。
       const newStyle = { ...childStyle, ...props.style };
       const newClassName = className ? `${className} ${childClass}` : childClass;
-      return React.cloneElement(children, { 
+      return React.cloneElement(children, {
         style: newStyle,
         ref,
         className: newClassName,
       });
     }
     return React.createElement(component, {
-      ref,
+      ref: typeof component === 'string' ? ref : undefined,
       ...props,
-      ...componentProps
+      ...componentProps,
     });
   }
 }