Question

请问我似乎无法得到我在这里做错的事情，我正在尝试为一个元素设置动画但是在转换时要添加到元素的类不会被添加，而是用它来监视它开发人员工具，什么都没有添加。

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

提前感谢，一直试图让它工作两个小时。

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>

因为你必须静态使用。否则它会在没有过渡的情况下出现并消失。

btw：classNames您可能会className？

React Addons CSS Transition Group不在OnEnter和onLeave

1 个答案: