问题描述
我想要的效果:
- 当页面加载分量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中的页面过渡和组件动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!