React Addons CSS Transition Group Not Adding Classes onEnter and onLeave

Question

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.

Sorry don't mean to dodge your question but are you aware there is a new package that React docs recommend and not the addons? See [react-transition-group](https://github.com/reactjs/react-transition-group/tree/v1-stable#high-level-api-csstransitiongroup) which supports CSSTransitionGroup — aug, Jul 20 '17 at 20:39
@aug Yh, I tried that but got the same behaviour so I just went back to what I've used before, I'll update my code to reflect the new library. — Daniel Barde, Jul 20 '17 at 20:58

score 1 · Accepted Answer · answered Jul 21 '17 at 15:02

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?

answered Jul 21 '17 at 15:02

Melounek

764
4
20

thanks, this method worked but had to fallback to version 1.x of react-transition-group, thank you very much. – Daniel Barde Jul 22 '17 at 00:12
I am using `ReactCSSTransitionGroup` and I dont really know the difference between these two libraries, but this one look more up-to-date and stable for me.. – Melounek Jul 24 '17 at 09:50

React Addons CSS Transition Group Not Adding Classes onEnter and onLeave

1 Answers1

Linked