diff --git a/src/QueueAnim.jsx b/src/QueueAnim.jsx index feef975..5c7947f 100644 --- a/src/QueueAnim.jsx +++ b/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; diff --git a/tests/index.js b/tests/index.js index cd0fde5..9fc5f3a 100644 --- a/tests/index.js +++ b/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); + }); });