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

Question

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

FWIW，我正在 react-storybook 中对此进行测试。这确实是我第一次使用它进行测试（到目前为止，我喜欢它），但我不知道它是否会干扰某些东西。

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

这是我的 LESS：

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

非常感谢任何帮助！

Answer 1

我可以用这个解决它：

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


        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="default" 
                    transitionEnterTimeout={300}
                    transitionLeaveTimeout={300}>
                    {items}
                </CSSTransitionGroup>
            </div>
        );
    }
}

const NavbarDropdown = NavbarDropdownBase;

export default NavbarDropdown;

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

还有我的LESS：

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

    .default-enter,
    .default-leave.default-leave-active {
        max-height: 0px;
        overflow: hidden;
    }

    .default-leave,
    .default-enter.default-enter-active {
        max-height: 500px; /* Approximate max height of dropdown */
        overflow: hidden;
    }

    .default-enter.default-enter-active,
    .default-leave.default-leave-active {
        transition: max-height .3s linear;
    }
}