嵌套开关可以使用换页动画吗？答案

【问题标题】：Can nested switch use change page animation?嵌套开关可以使用换页动画吗？
【发布时间】：2020-01-31 20:37:48
【问题描述】：

我遇到了换页动画的问题我现在正在为我的动画使用 react-transition-group。 app.jsx 里面的那个工作得很好，但我尝试将另一个动画应用到 main.jsx 但它不起作用。其他人可以帮忙吗？

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 >

【问题讨论】：

标签： reactjs react-router react-transition-group

【解决方案1】：

当您正在寻找整页转换时，一个很好的解决方案是react-transition-group。

从一个页面过渡到另一个页面变得容易。

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

当前页面退出，下一页面进入。

演示：

PS：我写了包。

【讨论】：