Lukáš Unzeitig Lukáš Unzeitig - 3 months ago 50
React JSX Question

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...

Answer

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.