React Addons CSS 过渡组未添加类 onEnter 和 onLeave

Question

拜托，我似乎无法理解我在这里做错了什么，我正在尝试为一个元素设置动画，但是本应在过渡时添加到该元素的类没有被添加, 已使用开发人员工具对其进行监控，但未添加任何内容。

使用反应过渡组 2.0.1

我是这样导入库的。

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

这是我的 JSX 代码。

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

这是我的 CSS 代码。

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

提前致谢，我已经尝试让它工作两个小时了。

Answer 1

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

改为

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

因为你必须静态使用。否则会出现和消失都没有过渡。

顺便说一句：classNames 你可能提到了 className?

React Addons CSS 过渡组未添加类 onEnter 和 onLeave

React Addons CSS Transition Group Not Adding Classes onEnter and onLeave

reactjs

reactcsstransitiongroup

React Addons CSS 过渡组未添加 类 onEnter 和 onLeave

React Addons CSS Transition Group Not Adding Classes onEnter and onLeave

reactjs

reactcsstransitiongroup

React Addons CSS 过渡组未添加类 onEnter 和 onLeave