fix #75

Author: jljsj33

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-queue-anim",
-  "version": "1.6.11",
+  "version": "1.6.12",
   "description": "Queue animation component for react",
   "keywords": [
     "react",

src/QueueAnim.jsx

@@ -56,11 +56,6 @@ class QueueAnim extends React.Component {
   };
   constructor(props) {
     super(props);
-    /**
-     * @param oneEnter
-     * 记录第一次进入;
-     */
-    this.oneEnter = false;
     /**
      * @param tweenToEnter;
      * 记录强制切换时是否需要添加 animation;
@@ -77,6 +72,11 @@ class QueueAnim extends React.Component {
      * 记录 TweenOne 标签，在 leaveUnfinishedChild 里使用，残留的元素不需要考虑 props 的变更。
      */
     this.saveTweenOneTag = {};
+    /**
+     * @param enterAnimation;
+     * 记录进场的动画, 在没进场完成, 将进场的动画保存，免得重新生成。
+     */
+    this.enterAnimation = {};
     /**
      * @param childrenShow;
      * 记录 animation 里是否需要 startAnim;
@@ -115,6 +115,7 @@ class QueueAnim extends React.Component {
         this.keysToEnter.push(child.key);
       } else {
         childrenShow[child.key] = true;
+        this.tweenToEnter[child.key] = true;
       }
     });
     this.keysToEnterToCallback = [...this.keysToEnter];
@@ -129,7 +130,6 @@ class QueueAnim extends React.Component {
     if (this.props.appear) {
       this.componentDidUpdate();
     }
-    this.oneEnter = true;
   }
 
   componentWillReceiveProps(nextProps) {
@@ -275,10 +275,11 @@ class QueueAnim extends React.Component {
     const enterOrLeave = type === 'enter' ? 0 : 1;
     const start = type === 'enter' ? 1 : 0;
     const end = type === 'enter' ? 0 : 1;
-    let startAnim = this.getAnimData(props, key, i, enterOrLeave, start);
     const animate = this.getAnimData(props, key, i, enterOrLeave, end);
-    startAnim =
-      type === 'enter' && (props.forcedReplay || !this.childrenShow[key]) ? startAnim : null;
+    const startAnim =
+      type === 'enter' && (props.forcedReplay || !this.childrenShow[key]) ?
+        this.getAnimData(props, key, i, enterOrLeave, start)
+        : null;
     let ease = transformArguments(props.ease, key, i)[enterOrLeave];
     const duration = transformArguments(props.duration, key, i)[enterOrLeave];
     if (Array.isArray(ease)) {
@@ -345,11 +346,6 @@ class QueueAnim extends React.Component {
     return [animateData.startAnimate, animateData.animation].filter(item => item);
   };
 
-  getTweenAppearData = (key, i) => ({
-    ...this.getAnimData(this.props, key, i, 0, 0),
-    duration: 0,
-  });
-
   getAnimData = (props, key, i, enterOrLeave, startOrEnd) => {
     /**
      * transformArguments 第一个为 enter, 第二个为 leave；
@@ -358,15 +354,15 @@ class QueueAnim extends React.Component {
      */
     return props.animConfig
       ? this.getTweenAnimConfig(
-          transformArguments(props.animConfig, key, i)[enterOrLeave],
-          startOrEnd,
-          enterOrLeave,
-        )
+        transformArguments(props.animConfig, key, i)[enterOrLeave],
+        startOrEnd,
+        enterOrLeave,
+      )
       : this.getTweenType(transformArguments(props.type, key, i)[enterOrLeave], startOrEnd);
   };
 
   getChildrenToRender = child => {
-    const { forcedReplay, leaveReverse, appear, delay, interval } = this.props;
+    const { forcedReplay, leaveReverse, delay, interval } = this.props;
     if (!child || !child.key) {
       return child;
     }
@@ -400,11 +396,7 @@ class QueueAnim extends React.Component {
     } else {
       // 处理进场;
       i = this.keysToEnterToCallback.indexOf(key);
-      if (!this.oneEnter && !appear) {
-        animation = this.getTweenAppearData(key, i);
-      } else {
-        animation = this.getTweenEnterOrLeaveData(key, i, 0, 'enter');
-      }
+      // appear=false 时，设定 childrenShow 和 tweenToEnter 都为 true, 这里不渲染 animation;
       if (this.tweenToEnter[key] && !forcedReplay) {
         // 如果是已进入的，将直接返回标签。。
         return createElement(TweenOne, {
@@ -413,6 +405,9 @@ class QueueAnim extends React.Component {
           forcedJudg,
           componentProps: child.props,
         });
+      } else if (!this.tweenToEnter[key]) {
+        animation = this.enterAnimation[key] || this.getTweenEnterOrLeaveData(key, i, 0, 'enter');
+        this.enterAnimation[key] = animation;
       }
     }
     const paused = this.keysToEnterPaused[key] && this.keysToLeave.indexOf(key) === -1;
@@ -471,6 +466,7 @@ class QueueAnim extends React.Component {
     const elem = e.target;
     elem.className = elem.className.replace(this.props.animatingClassName[0], '').trim();
     this.tweenToEnter[key] = true;
+    delete this.enterAnimation[key];
     this.props.onEnd({ key, type: 'enter', target: elem });
   };
 

tests/index.js

@@ -5,7 +5,6 @@ import React from 'react';
 import ReactDom from 'react-dom';
 import expect from 'expect.js';
 import TestUtils from 'react-dom/test-utils';
-import ticker from 'rc-tween-one/lib/ticker';
 import QueueAnim from '../src';
 
 const defaultInterval = 100;
@@ -15,21 +14,21 @@ describe('rc-queue-anim', () => {
 
   function getOpacity(node) {
     if (!node) {
-      return null;
+      return NaN;
     }
     return parseFloat(window.getComputedStyle(node).opacity);
   }
 
   function getLeft(node) {
     if (!node) {
-      return null;
+      return NaN;
     }
     return parseFloat(node.style.left);
   }
 
   function getTop(node) {
     if (!node) {
-      return null;
+      return NaN;
     }
     return parseFloat(node.style.top);
   }
@@ -262,42 +261,36 @@ describe('rc-queue-anim', () => {
     let index = 0;
     let maxOpacity;
     const opacityArray = [];
-    //
-    setTimeout(() => {
-      const interval = ticker.interval(() => {
-        index += 1;
-        // 取第一个， 时间为 450 加间隔 100 ，，应该 550 为最高点。10不是最高点
-        const children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div')[1];
-        const opacity = getOpacity(children);
-        if (!isNaN(opacity)) {
-          opacityArray.push(opacity);
-        }
-        console.log(
-          'time: ',
-          index * 50,
-          'opacity: ',
-          opacity || 0,
-          'children is remove:',
-          !children,
-        );
-        if (index === 10) {
-          instance.toggle();
-          console.log('toggle');
-        }
-        if (index === 11) {
-          // tweenOne 在改变动画后是在下一帧再启动改变后的动画，，
-          maxOpacity = opacity;
-        }
-        if (opacity >= 1 || opacity <= 0 || isNaN(opacity)) {
-          ticker.clear(interval);
-          console.log(maxOpacity);
-          opacityArray.forEach(o => {
-            expect(maxOpacity >= o).to.be.ok();
-          });
-          done();
-        }
-      }, 18);
-    }, 18);
+    const interval = setInterval(() => {
+      index += 1;
+      // 取第一个， 时间为 450 加间隔 100 ，，应该 550 为最高点。10不是最高点
+      const children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div')[1];
+      const opacity = getOpacity(children);
+      if (!isNaN(opacity)) {
+        opacityArray.push(opacity);
+      }
+      console.log(
+        'time: ',
+        index * 50,
+        'opacity: ',
+        opacity || 0,
+        'children is remove:',
+        !children,
+      );
+      if (index === 9) {
+        instance.toggle();
+        maxOpacity = opacity;
+        console.log('toggle');
+      }
+      if (opacity >= 1 || opacity <= 0 || isNaN(opacity)) {
+        clearInterval(interval);
+        console.log(maxOpacity);
+        opacityArray.forEach(o => {
+          expect(maxOpacity >= o).to.be.ok();
+        });
+        done();
+      }
+    }, 50);
   });
 
   it('should has animating className', done => {