fix #49

Author: jljsj33

examples/animating-class.js

@@ -2,7 +2,7 @@
 import QueueAnim from 'rc-queue-anim';
 import React from 'react';
 import ReactDom from 'react-dom';
-import '../assets/animating-class.less';
+import './assets/animating-class.less';
 
 class App extends React.Component {
   constructor(props) {

assets/animating-class.less renamed to examples/assets/animating-class.less

@@ -1,6 +1,7 @@
 .switch {
   height: 400px;
   background: #CCC;
+  padding: 40px 0;
   & ul {
     display: block;
     width: 100%;

assets/router.less renamed to examples/assets/router.less

@@ -3,7 +3,7 @@ import { HashRouter as Router, Route, Link, Redirect } from 'react-router-dom';
 import QueueAnim from 'rc-queue-anim';
 import React from 'react';
 import ReactDom from 'react-dom';
-import '../assets/router.less';
+import './assets/router.less';
 
 class Home extends React.Component {
   render() {

assets/switch.less renamed to examples/assets/switch.less

@@ -2,7 +2,7 @@
 import QueueAnim from 'rc-queue-anim';
 import React from 'react';
 import ReactDom from 'react-dom';
-import '../assets/switch.less';
+import './assets/switch.less';
 
 class Demo extends React.Component {
   constructor() {
@@ -40,17 +40,20 @@ class Demo extends React.Component {
 
   render() {
     const childrenToRender = this.getChildren();
-    return (<div className="switch" onMouseEnter={this.onEnter} onMouseLeave={this.onLeave}>
+    return (<div>
       <h2>鼠标经过当前区域，再移出区域查看</h2>
-      <QueueAnim component="ul" leaveReverse delay={[0, 300]} type="scale" enterForcedRePlay>
-        {childrenToRender}
-      </QueueAnim>
-      <QueueAnim component="ul" leaveReverse delay={150} type="scale" enterForcedRePlay>
-        {childrenToRender}
-      </QueueAnim>
-      <QueueAnim component="ul" leaveReverse delay={[300, 0]} type="scale" enterForcedRePlay>
-        {childrenToRender}
-      </QueueAnim>
+      <p>清除所有还在动画的参素并设置切换时的初始参数</p>
+      <div className="switch" onMouseEnter={this.onEnter} onMouseLeave={this.onLeave}>
+        <QueueAnim component="ul" leaveReverse delay={[0, 300]} type="scale" enterForcedRePlay>
+          {childrenToRender}
+        </QueueAnim>
+        <QueueAnim component="ul" leaveReverse delay={150} type="scale" enterForcedRePlay>
+          {childrenToRender}
+        </QueueAnim>
+        <QueueAnim component="ul" leaveReverse delay={[300, 0]} type="scale" enterForcedRePlay>
+          {childrenToRender}
+        </QueueAnim>
+      </div>
     </div>);
   }
 }

examples/router.js

@@ -2,7 +2,7 @@
 import QueueAnim from 'rc-queue-anim';
 import React from 'react';
 import ReactDom from 'react-dom';
-import '../assets/switch.less';
+import './assets/switch.less';
 
 class Demo extends React.Component {
   constructor() {
@@ -40,17 +40,19 @@ class Demo extends React.Component {
 
   render() {
     const childrenToRender = this.getChildren();
-    return (<div className="switch" onMouseEnter={this.onEnter} onMouseLeave={this.onLeave}>
+    return (<div>
       <h2>鼠标经过当前区域，再移出区域查看</h2>
-      <QueueAnim component="ul" leaveReverse delay={[0, 300]} type="scale">
-        {childrenToRender}
-      </QueueAnim>
-      <QueueAnim component="ul" leaveReverse delay={150} type="scale">
-        {childrenToRender}
-      </QueueAnim>
-      <QueueAnim component="ul" leaveReverse delay={[300, 0]} type="scale">
-        {childrenToRender}
-      </QueueAnim>
+      <div className="switch" onMouseEnter={this.onEnter} onMouseLeave={this.onLeave}>
+        <QueueAnim component="ul" leaveReverse delay={[0, 300]} type="scale">
+          {childrenToRender}
+        </QueueAnim>
+        <QueueAnim component="ul" leaveReverse delay={150} type="scale">
+          {childrenToRender}
+        </QueueAnim>
+        <QueueAnim component="ul" leaveReverse delay={[300, 0]} type="scale">
+          {childrenToRender}
+        </QueueAnim>
+      </div>
     </div>);
   }
 }

examples/switch-enterForcedRePlay.js

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

examples/switch.js

@@ -53,10 +53,9 @@ class QueueAnim extends React.Component {
   constructor(props) {
     super(props);
     this.oneEnter = false;
-    this.tweenKeyType = {};
+    this.tweenToShow = {};
     this.keysToEnter = [];
     this.keysToLeave = [];
-    this.saveTweenAnim = {};
     this.keysToEnterPaused = {};
     this.placeholderTimeoutIds = {};
     // 第一次进入，默认进场
@@ -196,11 +195,7 @@ class QueueAnim extends React.Component {
     const end = type === 'enter' ? 0 : 1;
     let startAnim = this.getAnimData(props, key, i, enterOrLeave, start);
     const animate = this.getAnimData(props, key, i, enterOrLeave, end);
-    /**
-     * 如果 this.tweenKeyType[key] 为空时，为第一次触发，需要设置开始。
-     * 如果 this.tweenKeyType[key] 有值时，说明正在动画，此时切换不需要开始。
-     */
-    startAnim = props.enterForcedRePlay || !this.tweenKeyType[key] || !this.saveTweenAnim[key] ?
+    startAnim = (type === 'enter' && props.enterForcedRePlay) || !this.tweenToShow[key] ?
       startAnim : {};
     let ease = transformArguments(props.ease, key, i)[enterOrLeave];
     const duration = transformArguments(props.duration, key, i)[enterOrLeave];
@@ -278,48 +273,40 @@ class QueueAnim extends React.Component {
       return child;
     }
     const key = child.key;
+    if (!this.state.childrenShow[key]) {
+      return null;
+    }
     let i = this.keysToLeave.indexOf(key);
-    if ((i >= 0 && this.state.childrenShow[key])
-      || this.state.childrenShow[key]) {
-      let animation;
-      if (i >= 0) {
-        if (this.tweenKeyType[key] === 'leave' && this.saveTweenAnim[key]) {
-          animation = this.saveTweenAnim[key];
-        } else {
-          const interval = transformArguments(this.props.interval, key, i)[1];
-          let delay = transformArguments(this.props.delay, key, i)[1];
-          const order = this.props.leaveReverse ? (this.keysToLeave.length - i - 1) : i;
-          delay = interval * order + delay;
-          animation = this.getTweenEnterOrLeaveData(key, i, delay, 'leave');
-          this.saveTweenAnim[key] = animation;
-        }
+    let animation;
+    // 处理出场
+    if (i >= 0) {
+      const interval = transformArguments(this.props.interval, key, i)[1];
+      let delay = transformArguments(this.props.delay, key, i)[1];
+      const order = this.props.leaveReverse ? (this.keysToLeave.length - i - 1) : i;
+      delay = interval * order + delay;
+      animation = this.getTweenEnterOrLeaveData(key, i, delay, 'leave');
+    } else {
+      // 处理进场;
+      i = this.keysToEnterToCallback.indexOf(key);
+      if (!this.oneEnter && !this.props.appear) {
+        animation = this.getTweenAppearData(key, i);
       } else {
-        i = this.keysToEnterToCallback.indexOf(key);
-        if (!this.oneEnter && !this.props.appear) {
-          animation = this.getTweenAppearData(key, i);
-        } else if (this.tweenKeyType[key] === 'enter' && this.saveTweenAnim[key]) {
-          animation = this.saveTweenAnim[key];
-        } else {
-          animation = this.getTweenEnterOrLeaveData(key, i, 0, 'enter');
-          this.saveTweenAnim[key] = animation;
-        }
+        animation = this.getTweenEnterOrLeaveData(key, i, 0, 'enter');
       }
-      const paused = this.keysToEnterPaused[key]
-        && !(this.keysToLeave.indexOf(key) >= 0 && this.state.childrenShow[key]);
-      animation = paused ? null : animation;
-      const isFunc = typeof child.type === 'function';
-      const forcedJudg = isFunc ? {} : null;
-      if (isFunc) {
-        Object.keys(child.type).forEach(name => {
-          if (typeDefault.indexOf(name) === -1) {
-            forcedJudg[name] = child.type[name];
-          }
-        });
-      }
-      return createElement(TweenOne,
-        { key, component: child.type, componentProps: child.props, forcedJudg, animation });
     }
-    return null;
+    const paused = this.keysToEnterPaused[key] && !this.keysToLeave.indexOf(key) >= 0;
+    animation = paused ? null : animation;
+    const isFunc = typeof child.type === 'function';
+    const forcedJudg = isFunc ? {} : null;
+    if (isFunc) {
+      Object.keys(child.type).forEach(name => {
+        if (typeDefault.indexOf(name) === -1) {
+          forcedJudg[name] = child.type[name];
+        }
+      });
+    }
+    return createElement(TweenOne,
+      { key, component: child.type, componentProps: child.props, forcedJudg, animation });
   };
 
   performEnter = (key, i) => {
@@ -332,7 +319,6 @@ class QueueAnim extends React.Component {
     if (this.keysToEnter.indexOf(key) >= 0) {
       this.keysToEnter.splice(this.keysToEnter.indexOf(key), 1);
     }
-    this.tweenKeyType[key] = 'enter';
   }
 
   performEnterBegin = (key) => {
@@ -347,34 +333,33 @@ class QueueAnim extends React.Component {
   performLeave = (key) => {
     ticker.clear(this.placeholderTimeoutIds[key]);
     delete this.placeholderTimeoutIds[key];
-    this.tweenKeyType[key] = 'leave';
   }
 
   enterBegin = (key, e) => {
     const elem = e.target;
     const animatingClassName = this.props.animatingClassName;
     elem.className = elem.className.replace(animatingClassName[1], '');
     if (elem.className.indexOf(animatingClassName[0]) === -1) {
-      elem.className += (`${elem.className ? ' ' : ''}${animatingClassName[0]}`);
+      elem.className = (`${elem.className} ${animatingClassName[0]}`).trim();
     }
+    this.tweenToShow[key] = true;
   }
 
   enterComplete = (key, e) => {
-    if (this.keysToEnterPaused[key]) {
+    if (this.keysToEnterPaused[key] || this.keysToLeave.indexOf(key) >= 0) {
       return;
     }
     const elem = e.target;
     elem.className = elem.className.replace(this.props.animatingClassName[0], '').trim();
     this.props.onEnd({ key, type: 'enter' });
-    delete this.tweenKeyType[key];
   }
 
   leaveBegin = (key, e) => {
     const elem = e.target;
     const animatingClassName = this.props.animatingClassName;
     elem.className = elem.className.replace(animatingClassName[0], '');
     if (elem.className.indexOf(animatingClassName[1]) === -1) {
-      elem.className += (` ${animatingClassName[1]}`);
+      elem.className = (`${elem.className} ${animatingClassName[1]}`).trim();
     }
   }
 
@@ -387,8 +372,7 @@ class QueueAnim extends React.Component {
     delete childrenShow[key];
     if (this.keysToLeave.indexOf(key) >= 0) {
       this.keysToLeave.splice(this.keysToLeave.indexOf(key), 1);
-      delete this.saveTweenAnim[key];
-      delete this.tweenKeyType[key];
+      delete this.tweenToShow[key];
     }
     const needLeave = this.keysToLeave.some(c => childrenShow[c]);
     if (!needLeave) {

package.json

@@ -238,7 +238,7 @@ describe('rc-queue-anim', () => {
       expect(getLeft(children[1])).to.be(100);
       expect(getTop(children[1])).to.be(100);
       done();
-    }, 917);
+    }, 1000);
   });
 
   it('should support animation when change direction at animating', (done) => {
@@ -285,14 +285,17 @@ describe('rc-queue-anim', () => {
       let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
       expect(children[1].className).to.contain('queue-anim-entering');
       ticker.timeout(() => {
+        children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
         expect(children[1].className).not.to.contain('queue-anim-entering');
         const removeIndex = instance.removeOne();
-        children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
-        expect(children[removeIndex + 1].className).to.contain('queue-anim-leaving');
         ticker.timeout(() => {
-          expect(children[removeIndex + 1].className).not.to.contain('queue-anim-leaving');
-          done();
-        }, 550);
+          children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
+          expect(children[removeIndex + 1].className).to.contain('queue-anim-leaving');
+          ticker.timeout(() => {
+            expect(children[removeIndex + 1].className).not.to.contain('queue-anim-leaving');
+            done();
+          }, 550);
+        }, 18);
       }, 550);
     }, 18);
   });
@@ -326,14 +329,14 @@ describe('rc-queue-anim', () => {
           expect(isNaN(getLeft(children[2]))).to.be.ok();
           console.log('top_end:', getTop(children[2]));
           done();
-        }, 517);// +17 帧为 tween-one 补帧。。。。complete 在时间结束后下一帧跟上。
+        }, 518);// +18 帧为 tween-one 补帧。。。。complete 在时间结束后下一帧跟上。
       }, interval);
       ticker.timeout(() => {
         children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
         expect(getLeft(children[1])).to.above(99.99);
         expect(isNaN(getTop(children[1]))).to.be.ok();
         console.log('left_end:', getLeft(children[1]));
-      }, 517);
+      }, 518);
     }, 18);
   });
 
@@ -373,7 +376,7 @@ describe('rc-queue-anim', () => {
             done();
           }, 500);
         }, 110);
-      }, 17);
+      }, 18);
     }, 1000);
   });
 });