CODEWITHSUNDEEP
animationreactjsmount
Lukáš Unzeitig
Lukáš Unzeitig

Reputation: 439

Reactjs issues during Initial Animation

Still i am getting error -

Failed prop type: transitionLeaveTimeout wasn't supplied to ReactCSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version of React

My render looks -

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

render(){
        const {...others} = this.props;
        return(<div id="navigation">
            <img id="openNav" onClick={this.handleClick} src={this.state.source}/>
             {this.state.clicked ?
                 <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
                    <Navigation {...others} />
                 </ReactCSSTransitionGroup>: false}
            </div>
        )
    }

"react": "^15.2.1",

i dont know where is the problem...

Upvotes: 0

Views: 259

Answers (2)

Paul Vincent Beigang
Paul Vincent Beigang

Reputation: 3002

You have to add transitionLeaveTimeout to your ReactCSSTransitionGroup component, so your render looks with 500ms leave timeout like this:

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

 render(){
    const {...others} = this.props;
    return(<div id="navigation">
        <img id="openNav" onClick={this.handleClick} src={this.state.source}/>
         {this.state.clicked ?
             <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionLeaveTimeout={500}>
                <Navigation {...others} />
             </ReactCSSTransitionGroup>: false}
        </div>
    )
}

Upvotes: 1

HiDeoo
HiDeoo

Reputation: 10563

The warning you're getting is due to a change documented in the React v0.14 changelog:

Add-Ons: To improve reliability, CSSTransitionGroup will no longer listen to transition events. Instead, you should specify transition durations manually using props such as transitionEnterTimeout={500}.

The code examples have been updated in the documentation but the props are not really documented.

You'll need to add these two props (transitionEnterTimeout and transitionLeaveTimeout) yourself.

<ReactCSSTransitionGroup 
  transitionName="example" 
  transitionAppear={true} 
  transitionAppearTimeout={500} 
  transitionEnterTimeout={500} 
  transitionLeaveTimeout={500}>

You can also disable animating enter and leave events if you want by using the transitionEnter={false} or transitionLeave={false} props to ReactCSSTransitionGroup.

Upvotes: 2

Related Questions