CODEWITHSUNDEEP
reactjsanimationroutes
Matt Saunders
Matt Saunders

Reputation: 4391

Page transitions AND component animation in ReactJS

My desired affect:

This sounds simple but I'm struggling to make it happen. So far I have a number of routes setup using react-router v4 and I am using CSSTransitionGroup to add movement to routes and components.

The problem I am having is:

Any hints or resources on how to achieve this desired affect would be great!

TL;DR: transitionLeaveTimeout is not being applied to animated components inside an animated route.

Upvotes: 2

Views: 816

Answers (1)

Matt Saunders
Matt Saunders

Reputation: 4391

I've found a solution, but it's not particularly elegant.

In brief, the problem occurred because any components which are rendered by a route technically only ever appear. So what I had to do was use the route's render function, like so:

<CSSTransitionGroup
transitionName="test"
transitionAppear={true}
transitionAppearTimeout={1000}
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}>

<Route exact path="/about" location={this.props.location} key={this.props.location.key} render={({ location }) => (

    <CSSTransitionGroup
    transitionName="test2"
    transitionAppear={true}
    transitionAppearTimeout={2000}
    transitionEnterTimeout={1000}
    transitionLeaveTimeout={1000}>

        <AboutBox key={this.props.location.key} />

    </CSSTransitionGroup>

)} />

</CSSTransitionGroup>

So what is happening here is:

  • The route is wrapped in a transition group, which means it animates on appear, enter and leave
  • The route itself is NOT using component=, it is using a render function (render=) to call the component (AboutBox)
  • Because this too is wrapped in a transition group, it can be animated on appear, enter and leave

If I were to move that transition group to the component itself, only appear would be available to it.

Hope this helps somebody!

Upvotes: 1

Related Questions