ReactJS ReactCSSTransitionGroup why does it work one component but not another?

Question

Trying to figure out why this ReactCSSTransitionGroup animation works:

class SlideExample 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='panel'>
                        <ul className="project-list">
                            <li>one</li>
                            <li>two</li>
                            <li>three</li>
                        </ul>
                    </div> 
                    : null 
                }
            </ReactCSSTransitionGroup>
        </div>
    }
}


const ProjectList = (props) => {
    return(
        <div className="ProjectList">
            <SlideExample />
        </div> 
    );
}

But not like this:

class App extends Component {
    constructor() {
        super();
        this.state = {
            _isProjectNavOpen: true,
        }
    }
    _toggleProjectNav() {
        this.setState(prevState => ({
            _isProjectNavOpen: !prevState._isProjectNavOpen,
        }));
    }
    render() {
        return(
            <div className="App">
                <Router>
                    <div className="main-content">
                        <Route path="/projects" component={(props, state, params) => 
                            <ProjectList 
                                _toggleProjectNav={this._toggleProjectNav} 
                                _isProjectNavOpen={this.state._isProjectNavOpen} 
                            {...props} />} />
                    </div>
                </Router>
            </div>
        );
    }
}
const ProjectList = (props) => {
    return(
        <div className="ProjectList">
            <div className="center title" onClick={props._toggleProjectNav} id="Menu">Menu</div>

            <ReactCSSTransitionGroup 
                transitionName="example"
                transitionEnterTimeout={300}
                transitionLeaveTimeout={300}>
                { 
                    props._isProjectNavOpen 
                    ? <div className='panel'>
                        <ul className="project-list">
                            <li>xx one</li>
                            <li>xx two</li>
                            <li>xx three</li>
                        </ul>
                    </div> 
                    : null 
                }
            </ReactCSSTransitionGroup>

        </div>
    );
}

The CSS:

.panel {
    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;
}

_toggleProjectNav is a prop passed down from a parent component that toggles the _isProjectNavOpen state true/false; it works in that the panel does hide/show, but without the animation... does it have to do with the state being passed from the parent? Trying to understand how ReactCSSTransitionGroup works.

Thanks!

Answer 1

This code works for me. In this case this is not a ReactCSSTransitionGroup issue. The issue is most probably related to the CSS. Pay attention, some browsers require initial height value before the transition. So you need something like this:

.example-leave {
    height: 100px;
}