React Addons CSS过渡组未添加onEnter和onLeave类 [英] 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.

使用react-transition-group 2.0.1

Using react-transition-group 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;
}

先谢谢了，现在一直在努力使它工作两个小时.

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

推荐答案

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

更改为

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

顺便说一句:您可能提到了classNames吗?

btw: by classNames you probably ment className?

这篇关于React Addons CSS过渡组未添加onEnter和onLeave类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！