React Addons CSS Transition Group Not Adding Classes onEnter and onLeave

问题

Please I can't seem to get what I'm doing wrong here, I'm trying to animate an element but the classes meant to be added to the element at transition don't get added, have monitored it with the developer tool and nothing gets added.

Using react-transition-group 2.0.1

I import the library like so.

import {CSSTransition} from 'react-transition-group';

Here is my JSX code.

var submenus = <Submenu menuList={item.submenus} key={'submenu'+index}/>;
return(
<li key={index} styleName={item.styleName} onMouseLeave={ this.resetSelectedMenu.bind(this) } onMouseEnter={this.showSubmenu.bind(this, item.label)}>
    <Link to={item.to}>
        <span>{item.label+'  '}<i className='fa fa-caret-down'></i></span>
    </Link>
    { (this.state.selectedSubmenu == item.label)
        && <CSSTransition classNames="submenu" timeout={500} children={submenus} />
    }
</li>)

Here is my CSS code.

.submenu-enter {
  opacity: 0.01;
  top: 50px;
}

.submenu-enter.submenu-enter-active {
  opacity: 1;
  top: 0px;
  transition: opacity 500ms ease-in, top 300ms ease-in;
  -moz-transition: opacity 500ms ease-in, top 300ms ease-in;
  -webkit-transition: opacity 500ms ease-in, top 300ms ease-in;
}

.submenu-leave {
  opacity: 1;
  top: 0px;
}

.submenu-leave.submenu-leave-active {
  opacity: 0.01;
  top: 50px;
  transition: opacity 500ms ease-in, top 300ms ease-in;
  -moz-transition: opacity 500ms ease-in, top 300ms ease-in;
  -webkit-transition: opacity 500ms ease-in, top 300ms ease-in;
}

Thank's in advance, have been trying to get this to work for two hours now.

回答1:

{ (this.state.selectedSubmenu == item.label)
    && <CSSTransition classNames="submenu" timeout={500} children={submenus} />
}

change to

<CSSTransition className="submenu" timeout={500}>
  {this.state.selectedSubmenu == item.label && submenu}
</CSSTransition>

because you have to use statically. Otherwise it will appear and dissapear without transition.

btw: by classNames you probably ment className?

来源：https://stackoverflow.com/questions/45224641/react-addons-css-transition-group-not-adding-classes-onenter-and-onleave

标签

reactjs

reactcsstransitiongroup