ReactJS ReactCSSTransitionGroup, почему работает один компонент, а не другой?

Question

Попытка выяснить, почему эта анимация ReactCSSTransitionGroup работает:

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> 
    );
}

Но не так:

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>
    );
}

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 - это реквизит, передаваемый из родительского компонента, который переключает состояние _isProjectNavOpen true/false; это работает в том, что панель скрывает / показывает, но без анимации... это имеет отношение к состоянию, передаваемому от родителя? Попытка понять, как работает ReactCSSTransitionGroup.

Спасибо!

Answer 1

Этот код работает для меня. В этом случае это не проблема ReactCSSTransitionGroup. Скорее всего, проблема связана с CSS. Обратите внимание, некоторые браузеры требуют начального значения высоты перед переходом. Итак, вам нужно что-то вроде этого:

.example-leave {
    height: 100px;
}