Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ReactCSSTransitionGroup when changing path

See original GitHub issue

I can’t get transitions between pages working. I’ve tried basing my code off of the universal router example here, but it doesn’t work. I’m passing a unique path prop to use as the unique transition key for ReactCSSTransitionGroup to use.

I’ve also tried setting ReactCSSTransitionGroup at every level in the Layout.js file, and none have worked. What am I missing?

Here is my latest Layout.js code:

render() {
  const {
  } = this.props;

  return (
        enter: s.enter,
        leave: s.leave
      <div className="mdl-layout mdl-js-layout" key={path} ref={node => (this.root = node)}>
        <div className="mdl-layout__inner-container">
          <Header />
          <main className="mdl-layout__content">
            <div className={cx(s.content, this.props.className)}>
            <Footer />

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

zanerileycommented, Feb 23, 2017

@stinoga Do you mind sharing your solution? I don’t think I understand the change by moving the <Layout /> component.

Read more comments on GitHub >

github_iconTop Results From Across the Web

prevent react router transitions on parent route when ...
This SwitchCSSTransitionGroup component is detecting if routes inside are really switching (based on react-router.
Read more >
Animating React Router v4 with ReactCSSTransitionGroup
Let's start by creating the parent route, or the '/' route which will call main component on which we will render child components....
Read more >
How to use animated transition in client-only paths site #3674
I'm trying to add animated transition in my client-only paths site ... That's correct, Gatsby changed how it does route changes since that ......
Read more >
Animating Route Transitions with React Router
We're all set to start adding routes. Create a pages folder in the src directory. This is where components that resolves to route...
Read more >
Usage with React Router - React Transition Group
You should use CSSTransition for each route and manage their in prop on their own. The main challenge is the exit transition because...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found