title: why is react-addons-css-transition-group not working here?
body: <pre><code>import CSSTransitionGroup from 'react-addons-css-transition-group' ; 
  
  class VariableDefinitions extends Component {
  
    render() {
      const { idToVarStates } = this.props;
  
      const varHtmlList = Object.keys(idToVarStates).map(id =&gt; {
        return (
          &lt;CSSTransitionGroup
          transitionEnterTimeout={1000} 
          transitionLeaveTimeout={1000}
          transitionName="fade"
          key={id}
           &gt;
              &lt;VariableDefine id={id} key={id} {...this.props} /&gt;
          &lt;/CSSTransitionGroup&gt;
        );
      })
  }}
  </code></pre>
  
  <p>This is how I am using the transition group . Here are my classes in style.css</p>
  
  <pre><code>.fade-enter{
    opacity: 0;
    height: 0%;
  }
  .fade-enter-active{
    transition: all 1s ; 
    height: 100%;
    opacity: 1;
  }
  
  .fade-leave{
    opacity: 1;
  }
  .fade-leave-active{
    transition: all 1s ;
    opacity: 0;
  }
  </code></pre>
  
  <p>When I Add elements (VariableDefine) components by changing the <code>idToVarStates</code> data , i don't get any animation at all . What is wrong here ? how to fix this ? </p>