0

I have the following code in the parent component - By default Module1 will show up and on click, it gets replaced by module2 - have this logic in place, trying to add some basic fade in/out when the module2 toggles, but the transition does not happen..what am I missing here?? 

<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
          <div className="container" onClick={this.onClick.bind(this)}>
            <span>
              <a> link
              </a>
            </span>
            {this.state.showModule ? <Module2 /> : <Module1 />}
          </div>
          </ReactCSSTransitionGroup>

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

.example-appear {
  opacity: 0.05;
  transition: opacity .5s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}
monkeyjs
  • 604
  • 2
  • 7
  • 29
  • Here is a working example - http://stackoverflow.com/questions/34824391/element-is-removed-after-transitionleavetimeout-but-how-come-not-inserted-afte – Noitidart Nov 11 '16 at 23:12
  • still not sure how should I make it work for my code - conditional render of components - tried adding the transition to child components, but no luck – monkeyjs Nov 11 '16 at 23:22
  • Here is a working fiddle - https://jsfiddle.net/wq4vfv2o/ you can tweak this to your liking – Noitidart Nov 11 '16 at 23:23

0 Answers0