Pourquoi CSSTransitionGroup ne fonctionne-t-il pas dans mon exemple de liste déroulante?

Question

Je passe mon temps à animer une simple liste déroulante en utilisant React CSSTransitionGroup. J'aimerais l'animer en glissant de haut en bas. J'ai saisi ce code à partir d'un exemple en ligne qui fonctionnait, mais cela ne semble pas fonctionner pour moi. Le menu apparaît et disparaît instantanément. FWIW, je suis en train de tester cela dans reac-storybook. C'est vraiment mon premier test en l'utilisant (jusqu'à présent, je l'aime bien), mais je ne sais pas si cela peut interférer avec quelque chose.

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

Et voici mon MOINS:

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

Toute aide est très appréciée!

Answer 1

j'ai pu résoudre avec ceci:

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

Et mon MOINS:

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