ReactJS中的页面转换和组件动画

我想要的影响：

• 当页面加载组件A、B和C时，它们会单独设置动画
• 用户单击组件B内的链接
• 组件A、B和C独立设置动画
• 加载新页面时，会有更多组件在其上设置动画

这听起来很简单，但我正在努力实现它。到目前为止，我已经使用

react router

v4设置了许多路由，并且我正在使用

cstransitiongroup

向路由和组件添加移动

我遇到的问题是：

• 如果路线已设置动画，则我似乎无法在调用的组件内设置任何动画。当然，组件离开时的动画将不起作用
• 如果仅为零部件（而不是管线）设置动画，则管线更改时，任何动画都不会延迟

任何关于如何实现这种预期效果的提示或资源都将非常有用

---

TL；DR:transitionLeaveTimeout未应用于动画路由内的动画组件。

我找到了一个解决方案，但它不是特别优雅

简言之，出现问题的原因是，技术上由路由渲染的任何组件都只会出现。所以我要做的就是使用路由的

render

函数，如下所示：

<CSSTransitionGroup
transitionName="test"
transitionAppear={true}
transitionAppearTimeout={1000}
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}>

<Route exact path="/about" location={this.props.location} key={this.props.location.key} render={({ location }) => (

    <CSSTransitionGroup
    transitionName="test2"
    transitionAppear={true}
    transitionAppearTimeout={2000}
    transitionEnterTimeout={1000}
    transitionLeaveTimeout={1000}>

        <AboutBox key={this.props.location.key} />

    </CSSTransitionGroup>

)} />

</CSSTransitionGroup>

(
)} />

因此，这里发生的是：

• 路线被包装在过渡组中，这意味着它会在“显示”、“输入”和“离开”时设置动画
• 路由本身没有使用

  组件=

  ，而是使用渲染函数（

  渲染=

  ）来调用组件（AboutBox）
• 因为这也是包装在过渡组中的，所以可以在“显示”、“输入”和“离开”时设置动画

如果我将该转换组移动到组件本身，则只有“显示”对它可用

---

希望这对别人有帮助

很棒的解决方案，你有没有调整过你的方法，因为这已经是一个很好的答案了？