Can nested switch use change page animation?

Question

I have a problem about page changing animation I'm now using react-transition-group for my animation. The one inside app.jsx works just fine but I try to apply another animation to main.jsx but it's not working. Another can help?

App.jsx

  <CSSTransition key={currentkey}  classNames={"fade"} timeout={1000}>
     <section className="route-section">
       <Switch location={this.props.location} >
         <Route path="/main" component={Main} />
         <Route exact path="/login" component={Login} />
            <Redirect exact from="/" to="/login" />
       </Switch>
      </section>
  </CSSTransition>
  </TransitionGroup>

Main.jsx

 <TransitionGroup className="trantision-group">
      <CSSTransition key={currentkey}  classNames={"fade"} timeout{1000}>
         <section className="route-section">
              <Switch >
                 <Route path="/main/env"  component={Env} />
                 <Route path="/main/home" component={Home}  />
                      <Redirect exact from="/main" to="/main/env" />
                 </Switch>
         </section>
        </CSSTransition>
 </TransitionGroup >

score 1 · Accepted Answer · answered Jan 31 '20 at 12:37

As you are looking for Full Page Transitions, a great solution is react-transition-group.

It makes easy to transition from one page to another.

<Link
  to="/some-path"
  transition="glide-right"
/>

The current page exit and the next one enters.

The demo:

demo-gif

PS: I wrote the package.

Can nested switch use change page animation?

1 Answers1