CODEWITHSUNDEEP
reactjsreactcsstransitiongroup
Daniel Barde
Daniel Barde

Reputation: 2703

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.

Upvotes: 1

Views: 1080

Answers (1)

Melounek
Melounek

Reputation: 890

{ (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?

Upvotes: 1

Related Questions