Complete callback fires on the component render

[Ruslan Yurchenko]

Hi there, I have some trouble with complete callback. E.g. When the page load I see in the console a message from handleCompleteAction function but animation didn't start. I'm not need to fire a complete callback on the component render. Any ideas?

Here's the code:

    state = {
      wheelActive: false,
      completedContest: false,
    };
  
    handleClick = (e) => {
      e.preventDefault();
      this.setState({
        wheelActive: true,
      });
    };
  
    handleCompleteAction = () => {
      console.log('completed');
      this.setState({
        completedContest: true,
      });
    };
  
    render() {
      const overlayClassName = this.state.completedContest ? `${CSS.prizeWheel} ${CSS.completed}` : `${CSS.prizeWheel}`;
      return (
          <div className={overlayClassName}>
            <h3 className={CSS.heading}>Prize Wheel</h3>
            <p className={CSS.subHeading}>Spin the jet engine below for your chance to win millions of points</p>
            <div className={CSS.wrap}>
              <div className={`${CSS.overlay} ${CSS.active}`}>
                <span className={CSS.winText}>
                  CONGRATS! You have won 1000 points.
                </span>
                <VelocityComponent
                    animation={{
                      rotateZ: this.state.wheelActive
                          ? [0, -360 * 40]
                          : 0,
                    }}
                    duration={8000}
                    complete={this.handleCompleteAction}
                >
                  <div className={CSS.wheel}>
                    <a href="#" onClick={this.handleClick}>
                      <img src={wheel}/>
                    </a>
                  </div>
                </VelocityComponent>
              </div>
            </div>
          </div>
      );
    }

[Mohammed Erraysy]

+1, When the runOnMount prop is falsy the complete callback gets called on component's mount.

This behavior is there due to the following statements https://github.com/google-fabric/velocity-react/blob/master/src/velocity-component.js#L67.

@finneganh I don't know exactly the semantics of ending the animation at the component's mount when it's not supposed to runOnMount, the only thing a know is that it's not natural and contrasts with the meaning and uses of complete callback.