Lukáš Unzeitig Lukáš Unzeitig - 1 year ago 176
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');

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}

"react": "^15.2.1",

i dont know where is the problem...

Answer Source

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.


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