CODEWITHSUNDEEP
reactjsreactjs-flux
MahatmaManic
MahatmaManic

Reputation: 953

ReactCSSTransitionGroup doesn't seem to be applying animations

I'm working on my first React app, and I'm trying to get a simple fade transition working between "pages" (top level components I am adding and removing). I'm working off what seems to be the very straightforward example here

My render method looks like this:

render: function() {
    var currentPage;
    switch (this.state.currentPage) {
        case pages.DASHBOARD:
            currentPage = <Dashboard />;
            break;
        case pages.PROFILE:
            currentPage = <Profile />;
            break;
    }

    var currentPageDiv = <div key={currentPage}> {currentPage} </div>;

    return (
        <div className = 'App'>
            <Header />
            <ReactCSSTransitionGroup transitionName="pageChange">
                {currentPageDiv}
            </ReactCSSTransitionGroup>
            <Footer />
        </div>
    );
},

and the CSS looks like this:

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

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

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

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

When the state updates the page transitions to the other page as it should. But the transition just "pops" identically to the way it did before I added the TransitionGroup code (so it seems the TransitionGroup code didn't have any functional effect). What noob mistake(s) am I making?

Upvotes: 2

Views: 4093

Answers (1)

glortho
glortho

Reputation: 13200

Change your key to a simple string instead of the React component you currently have. For example:

var currentPageDiv = <div key={this.state.currentPage}> {currentPage} </div>;

Upvotes: 3

Related Questions