Getting ReactCSSTransitionGroup to work for a fade in transition with React.js

Question

I have a simple landing page that I want to add a transition effect to. I am using React for my view rendering. I want to have a button fade in and out based on certain states:

<ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
                              <div className="button-row">
                                  <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
                              </div>
                              </ReactCSSTransitionGroup>

CSS:

.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.01;
  transition: opacity .5s ease-in;
}

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

However, when I run this, the transition does not work. Is there something I'm missing? Thank you!

score 3 · Accepted Answer · answered Jul 17 '15 at 02:27

Your code does work, see JSFiddle. I've enlarged the transition duration of .example-appear and changed the transition of .example-enter which you can see after clicking any links.

Note that .example-appear, which is triggered in componentDidMount(), has effects on the first rendering of mounted component ; .example-enter on the other hand has effects on newly rendered children components.

Getting ReactCSSTransitionGroup to work for a fade in transition with React.js

1 Answers1