feat add shouldPlay prop

src/QueueAnim.jsx

@@ -298,7 +298,7 @@ class QueueAnim extends React.Component {
     const delay = transformArguments(this.props.delay, key, i)[0];
     this.placeholderTimeoutIds[key] = setTimeout(
       this.performEnterBegin.bind(this, key, i),
-      interval * i + delay
+      this.props.appear ? interval * i + delay : 0
     );
     if (this.keysToEnter.indexOf(key) >= 0) {
       this.keysToEnter.splice(this.keysToEnter.indexOf(key), 1);
@@ -316,6 +316,10 @@ class QueueAnim extends React.Component {
     if (!node) {
       return;
     }
+    if (!this.props.appear) {
+      this.props.onEnd({ key, type: 'enter' });
+      return;
+    }
     const duration = transformArguments(this.props.duration, key, i)[0];
     velocity(node, 'stop');
     const data = this.props.enterForcedRePlay ? this.getVelocityEnterConfig(key, i) :
@@ -339,11 +343,20 @@ class QueueAnim extends React.Component {
     if (!node) {
       return;
     }
+    velocity(node, 'stop');
+    if (!this.props.appear) {
+      this.state.childrenShow[key] = true
+      this.setState({
+        children: this.props.children,
+        childrenShow: this.state.childrenShow,
+      })
+      this.props.onEnd({ key, type: 'leave' });
+      return
+    }
     const interval = transformArguments(this.props.interval, key, i)[1];
     const delay = transformArguments(this.props.delay, key, i)[1];
     const duration = transformArguments(this.props.duration, key, i)[1];
     const order = this.props.leaveReverse ? (this.keysToLeave.length - i - 1) : i;
-    velocity(node, 'stop');
     node.style.visibility = 'visible';
     const data = this.getInitAnimType(node, this.getVelocityLeaveConfig(key, i));
     velocity(node, data, {
@@ -435,6 +448,7 @@ class QueueAnim extends React.Component {
       'animatingClassName',
       'enterForcedRePlay',
       'onEnd',
+      'appear',
     ].forEach(key => delete tagProps[key]);
     return createElement(this.props.component, { ...tagProps }, childrenToRender);
   }
@@ -460,6 +474,7 @@ QueueAnim.propTypes = {
   enterForcedRePlay: React.PropTypes.bool,
   animatingClassName: React.PropTypes.array,
   onEnd: React.PropTypes.func,
+  appear: React.PropTypes.bool,
 };
 
 QueueAnim.defaultProps = {
@@ -474,6 +489,7 @@ QueueAnim.defaultProps = {
   enterForcedRePlay: false,
   animatingClassName: ['queue-anim-entering', 'queue-anim-leaving'],
   onEnd: noop,
+  appear: true,
 };
 
 export default QueueAnim;

tests/index.js

@@ -351,4 +351,45 @@ describe('rc-queue-anim', () => {
       }, 17);
     }, 1000);
   });
+
+  it('when appear is false, do not play anime', (done) => {
+    const interval = defaultInterval;
+    const instance = createQueueAnimInstance({
+      appear: false,
+      animConfig(e) {
+        if (e.index === 1) {
+          return { top: [100, 0] };
+        }
+        return { left: [100, 0] };
+      },
+    });
+    let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
+    expect(isNaN(getLeft(children[1]))).to.be.ok();
+    expect(isNaN(getTop(children[2]))).to.be.ok();
+    setTimeout(() => {
+      children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
+      expect(isNaN(getLeft(children[1]))).to.be.ok();
+      expect(isNaN(getTop(children[1]))).to.be.ok();
+      console.log('left:', getLeft(children[1]));
+      setTimeout(() => {
+        children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
+        expect(isNaN(getTop(children[2]))).to.be.ok();
+        expect(isNaN(getLeft(children[2]))).to.be.ok();
+        console.log('top:', getTop(children[2]));
+        setTimeout(() => {
+          children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
+          expect(isNaN(getTop(children[2]))).to.be.ok();
+          expect(isNaN(getLeft(children[2]))).to.be.ok();
+          console.log('top_end:', getTop(children[2]));
+          done();
+        }, 500);
+      }, interval);
+      setTimeout(() => {
+        children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
+        expect(isNaN(getLeft(children[1]))).to.be.ok();
+        expect(isNaN(getTop(children[1]))).to.be.ok();
+        console.log('left_end:', getLeft(children[1]));
+      }, 500);
+    }, 17);
+  });
 });