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

Question

我想要的效果：

• 当页面加载组件 A、B 和 C 时独立动画
• 用户单击组件 B 内部的链接
• 组件 A、B 和 C 独立关闭动画
• 新页面加载，更多组件动画化。

这听起来很简单，但我正在努力实现它。到目前为止，我已经使用react-router v4 设置了许多路线，并且我正在使用CSSTransitionGroup 为路线和组件添加运动。

我遇到的问题是：

• 如果路线是动画的，我似乎无法为被调用组件内的任何内容设置动画。当然，组件离开时的动画将不起作用。
• 如果仅对组件（而不是路线）进行了动画处理，则当路线更改时，任何动画都不会发生延迟。

任何关于如何实现这种预期效果的提示或资源都会很棒！

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

Answer 1

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

简而言之，问题的发生是因为任何由路由渲染的组件在技术上只会出现。所以我要做的是使用路由的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>

所以这里发生的是：

• 路线被包裹在一个过渡组中，这意味着它会在出现、进入和离开时进行动画处理
• 路由本身没有使用component=，它使用渲染函数（render=）来调用组件（AboutBox）
• 因为它也被包裹在一个过渡组中，所以它可以在出现、进入和离开时进行动画处理

如果我将该过渡组移动到组件本身，则只有出现可供它使用。

希望这对某人有所帮助！