CODEWITHSUNDEEP
reactjstransition
Teddy Radenkov
Teddy Radenkov

Reputation: 91

React transitions group

I am having an issue where I apply an animation to the parent route and the children inherit the same animations. I want different animations for the parent route from the the children routes. Can any one help with that. Here is what I am doing:

render() method:

const path = this.props.location.pathname;
const segment = path.split('/')[1] || 'root';

return() method:

<ReactCSSTransitionGroup
      transitionName = "fade"
      transitionEnterTimeout = {750}
      transitionLeaveTimeout = {250}>
      {React.cloneElement(this.props.children, {key: segment})}
</ReactCSSTransitionGroup>

And then in my children component:

<ReactCSSTransitionGroup
      transitionName = "slide"
      transitionEnterTimeout = {1000}
      transitionLeaveTimeout = {1000}>
      {React.cloneElement(this.props.children, {key: this.props.location.pathname})}
</ReactCSSTransitionGroup>

The children routes get fade instead of slide animation?

Upvotes: 2

Views: 89

Answers (1)

Teddy Radenkov
Teddy Radenkov

Reputation: 11

The problem was that the key was exactly the same for each child, so I used the path as a key instead because the path is always different.

Upvotes: 1

Related Questions