在子路由之间反应 CSSTransition答案

【问题标题】：React CSSTransition between sub routes在子路由之间反应 CSSTransition
【发布时间】：2019-08-02 05:03:40
【问题描述】：

App Component:
<TransitionGroup>
    <CSSTransition classNames="slide">
        <Switch>
            <Route path='/page1' component={Page1} />
            <Route path='/page2/:tab' component={Page2} />
        </Switch>
    </CSSTransition>
</TransitionGroup>


Page2 Component:
<TransitionGroup>
    <CSSTransition classNames="fade">
        <Switch>
            <Route path='/tab1' component={T1} />
            <Route path='/tab2' component={T2} />
        </Switch>
    </CSSTransition>
</TransitionGroup>

我想要两种类型的动画。一个在页面之间，一个在页面内的选项卡之间。但是，当我单击 page2/tab1 或 page2/tab2 页面（幻灯片）动画时。当我想应用标签动画（淡入淡出）时。有办法解决吗？

【问题讨论】：

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

【解决方案1】：

您应该在“应用程序组件”中使用SwitchTransition 而不是TransitionGroup。阅读文档中的第二段http://reactcommunity.org/react-transition-group/switch-transition

【讨论】：