reactjs - 如何使用 react-router 并通过 react-transition-group 拥有不同类型的动画（或没有）

Question

我使用 React Router 自己的动画示例作为起点，并获得了一个简单的始终淡入动画效果。

问题是，这种设置太简单了，我需要任何东西，从根本没有过渡到任意数量的过渡（例如，向左和向右定向运动，复制 IOS 应用程序过渡）。

一旦我开始调整 的exit和enter道具，事情的TransitionGroup变化就会崩溃，没有什么能像弄乱已经存在的元素并创建一堆配置一样起作用（我试过移动和道具无济于事） ：classNamesCSSTransitionexitenterCSSTransition

<Route render={({ location }) => {
    let direction = location.state ? location.state.direction : null
    let doAnimation = !!direction 

    // direction = the type of animation to use, if null = no animation

    return (
        <TransitionGroup enter={doAnimation} exit={doAnimation} >
            <CSSTransition 
                key={location.key} 
                classNames={direction || "none"} 
                timeout={500}> 
                <Switch  
                    location={location}>
                    {routes}
                </Switch> 
            </CSSTransition>
        </TransitionGroup> 
    )
}} /> 

有没有像这样控制动画，可能一起禁用它们？如果没有，是否有动画/库为浏览器应用程序提供导航和转换等原生应用程序？