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

我想要的效果：

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

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

我遇到的问题是：

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

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

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

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

简而言之，问题的发生是因为从技术上讲，由路由渲染的任何组件都只能appear。所以我要做的就是使用路线的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)
• 因为它也包含在过渡组中，所以可以在出现、进入和离开时进行动画处理

如果我将该过渡组移至组件本身，则仅出现对其可用。

希望这对某人有帮助！