React CSS Transition Group, not working? - reactjs

Question

Apologies for the simplicity of this problem, but I am new to React and trying to implement a simple CSSTransitionGroup to hide/show an element, but with a fade, slide, etc. The documentation seems very straightforward, but for some reason the following code will not work for me.
While the .box toggles between being there or not, I do not see any of the CSS transitions in place on enter and on leave.
class Demo extends React.Component{
constructor(props) {
super(props);
this.state = { visible: false };
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
this.setState({ visible: ! this.state.visible });
}
render() {
return <div>
<button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
<ReactCSSTransitionGroup transitionName="example">
{ this.state.visible ? <div className='box' /> : null }
</ReactCSSTransitionGroup>
</div>
}
}
.box {
width: 200px;
height: 100px;
background: green;
margin-top: 10px; }
.example-enter {
height: 0px; }
.example-enter.example-enter-active {
height: 100px;
-webkit-transition: height .3s ease; }
.example-leave.example-leave-active {
height: 0px;
-webkit-transition: height .3s ease; }
I must be doing something wrong, as I can see this basic demo working in other online examples, but cannot replicate myself. Please let me know how to get my CSS transitions.
Thx internet

Answer 1

Did you check the console for error output? Because when I run your code I get this:
"Warning: Failed propType: transitionEnterTimeout wasn't supplied to
ReactCSSTransitionGroup: this can cause unreliable animations and
won't be supported in a future version of React. See
xxx for more
information. Check the render method of Demo."
"Warning: Failed
propType: transitionLeaveTimeout wasn't supplied to
ReactCSSTransitionGroup: this can cause unreliable animations and
won't be supported in a future version of React. See
xxx for more
information. Check the render method of Demo."
Adding the two missing props and it works fine.
class Demo extends React.Component{
constructor(props) {
super(props);
this.state = { visible: false };
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
this.setState({ visible: ! this.state.visible });
}
render() {
return <div>
<button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={300} transitionLeaveTimeout={300} >
{ this.state.visible ? <div className='box' /> : null }
</ReactCSSTransitionGroup>
</div>
}
}
transitionEnterTimeout and transitionLeaveTimeout both take a number representing the duration of the transition in milliseconds, hence "300" for a .3 second transition, which matches the CSS transitions you've specified.