14

I have a ReactCSSTransitionGroup I'm using with CSS Modules (and dynamic routing from react-router but I believe this is working as expected).

<ReactCSSTransitionGroup
  component="div"
  transitionName={transitions}
  transitionAppear
  transitionAppearTimeout={1000}
  transitionEnterTimeout={2000}
  transitionLeaveTimeout={2000}
>
  {React.cloneElement(this.props.children, {
    key: location.pathname,
  })}
</ReactCSSTransitionGroup>

The appear and leave transitions work perfectly - but the enter transitions do not - they simply appear immediately, with the previous component fading out after the new component has entered.

The CSS (using CSS Modules):

.enter {
  opacity: 0.01;
}

.enter.enterActive {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.leave.leaveActive {
  opacity: 0.01;
  transition: opacity 2000ms ease-in;
}

.appear {
  opacity: 0.1;
  transition: opacity 1000ms ease-out;
}

.appearActive {
  opacity: 1;
  transition: opacity 1000ms ease-out;
}

--- EDIT ---

I discovered that it works as expected on child routes (I only have a small handful of those in my app). All routes including child routes are loaded dynamically, so I'm still not sure what causes it to work in those cases but not in others.

Toby
  • 12,743
  • 8
  • 43
  • 75
  • here try this fiddle,i changed the time of .enter.enteractive to 2000 https://jsfiddle.net/dcfsyre2/ so could you explain the problem you are facing? or could you post a fiddle and explain the problem – Pritish Vaidya Oct 04 '16 at 19:43
  • I doubt it is because of the location where you import your css styles. Try importing your css files in some root module to make it effect as early as possible. – Jason Xu Nov 08 '16 at 02:07

1 Answers1

2

There are many bugs with CSS transitions at the browser level, and each type of transition has different dependencies(according to the docs)

Suggestion is to use a more developer friendly api:

Blair Anderson
  • 19,463
  • 8
  • 77
  • 114