ReactJS中的页面过渡和组件动画 [英] Page transitions AND component animation in ReactJS

问题描述

我想要的效果：

• 当页面加载分量A，B和C单独进行动画时


• 用户单击组件B中的链接


• 组件A，B和C分别独立动画


• 加载新页面，

• When the page loads components A, B and C animate on independently
• The user clicks a link inside, say, component B
• Components A, B and C animate off independently
• A new page loads, more components animate on.

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

This sounds simple but I'm struggling to make it happen. So far I have a number of routes setup using react-router v4 and I am using CSSTransitionGroup to add movement to routes and components.

我遇到的问题是：

• 如果有路线是动画的，我似乎无法为被调用的组件内的任何东西设置动画。当然，组件离开时的动画将不起作用。


• 如果仅对一个组件进行了动画处理（而不是对路线进行动画处理），则当路线更改时，任何动画都不会延迟。

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

Any hints or resources on how to achieve this desired affect would be great!

TL; DR：transitionLeaveTimeout没有应用到动画路径中的动画组件。

TL;DR: transitionLeaveTimeout is not being applied to animated components inside an animated route.

推荐答案

我发现

总之，出现此问题的原因是，从技术上讲，仅由路径渲染的任何组件都只会出现 。所以我要做的就是使用路由的 render 函数，例如：

In brief, the problem occurred because any components which are rendered by a route technically only ever appear. So what I had to do was use the route's render function, like so:

<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）


• 因为这也包含在过渡组中，所以可以在出现时进行动画处理，进入并离开

• The route is wrapped in a transition group, which means it animates on appear, enter and leave
• The route itself is NOT using component=, it is using a render function (render=) to call the component (AboutBox)
• Because this too is wrapped in a transition group, it can be animated on appear, enter and leave

如果我要移动那个

希望这对某人有帮助！

这篇关于ReactJS中的页面过渡和组件动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！