为什么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 
}; 

这是我的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; 
    } 
}