爲什麼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; 
    } 
}