我正在创建一个包含三种状态的简单应用，并使用React的路由器和ReactCSSTransitiouGroup。 ReactCSSTransitionGroup的默认行为很简单：
我尝试做的是改变这种行为，使其表现得像：
有一些简单的方法来获得这个吗？谢谢！
答案 0 :(得分：0)
一个简单的解决方案是不使用传统链接。如果您add a custom event listener，则可以通过startTimeout(namedFunctionToSetLocation, 200ms)开始超时。我强烈建议您节俭，并使用标志来控制状态的复杂性，否则将尝试吞噬您。
详细信息：
当有人触发您的事件侦听器时，首先设置一些状态，这将为您的类添加“ app-leave”和“ app-leave-active”。您可以在单独的函数中执行此操作，但可以make sure to bind the function到组件的this，以便它可以访问this.state或在渲染时传递状态。
在该函数中，您还想启动超时，因此您可以在延迟后进行下一次更改。这时值得生成一个ID或设置一个标志，因此您可以在延迟之后检查当时没有任何其他事情开始（如果您对所有转换都使用一个ID变量，并且在每次新的变量开始时都进行更新，您应该进行坚如磐石的检查，在异步延迟后，您是否仍然关心继续操作。
触发超时并检查了标志后，可以根据需要手动触发路由器或设置新位置。
我发现当ReactTransitionGroup不完美时，使用简单的定制方法很有用。转换组在ReactRouter v4中具有细微的行为，如果您只需要单击延迟或简单的类更改，则完全没有必要。
最后，您还可以在条件渲染块（如我刚刚描述的那些渲染块）中使用普通的ReactRouter和ReactTransitionGroup组件-请勿忽略该技术，因为它就像React-ee一样。