为什么CSSTransitionGroup在我的下拉示例中不起作用？

Question

我正在使用React CSSTransitionGroup制作一个简单的下拉菜单。我想动画它上下滑动。我从一个正在运行的在线示例中抓取了这个代码，但它似乎对我不起作用。菜单刚出现并立即消失。

FWIW，我正在反应故事书中对此进行测试。这是我第一次尝试使用它（到目前为止，我喜欢它），但我不知道它是否会干扰某些事情。

import PropTypes from 'prop-types';
import React from 'react';
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

class NavbarDropdownBase extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            expanded: false
        };

        this.onClickHeader = this.onClickHeader.bind(this);
    }

    onClickHeader(event) {
        this.setState({ expanded: !this.state.expanded });
    }

    render() {
        let items, nodes;
        if (this.props.items && this.state.expanded) {
            if (this.props.items) {
                nodes = this.props.items.map((item, i) => (
                    <li key={i}>
                        <a onClick={() => this.props.onItemClick(item)}>{item.label}</a>
                    </li>
                ));
            }

            items = (
                <div key="items" ref={c => this.items = c} className="items">
                    <ul>
                        {nodes}
                    </ul>
                </div>
            );
        } else {
            items = <div key="items" ref={c => this.items = c} className="items" />;
        }


        let className = 'navbar-dropdown';
        className += this.state.expanded ? ' expanded' : ' collapsed';
        className += (this.props.className || '');

        return (
            <div className={className}>
                <div className="header" onClick={this.onClickHeader}>
                    <h3>Click</h3>
                </div>
                <CSSTransitionGroup transitionName="menu" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
                    {items}
                </CSSTransitionGroup>
            </div>
        );
    }
}

const NavbarDropdown = NavbarDropdownBase;`

export default NavbarDropdown;

NavbarDropdownBase.propTypes = {
    className: PropTypes.string,
    items: PropTypes.array.isRequired,
    onItemClick: PropTypes.func.isRequired
};

这是我的遗憾：

.navbar-dropdown {
    .items {
        ul {
            list-style-position: inside;
            list-style: none;
            margin: 0;
            padding: 0;
        }
    } 
}

.menu-enter {
    max-height: 0px;
    transition: max-height 1s ease;
    -webkit-transition: max-height 1s ease;
    overflow: hidden;
}

.menu-enter.menu-enter-active {
    height: auto;
    max-height: 1000px;
}

.menu-leave {
    max-height: 1000px;
    transition: max-height 1s ease;
    -webkit-transition: max-height 1s ease;
}

.menu-leave.menu-leave-active {
    overflow: hidden;
    max-height: 0px;
}

非常感谢任何帮助！