Question

我试图制作一个react-router应用，使用ReactCSSTransitionGroup动画转换页面，但我无法弄清楚如何动态设置transitionName以便我根据我想去的路线，可以使用不同的动画。例如，我希望根路径在彼此之间淡入淡出，但是子路径应该滑入/滑出 - 也就是说，我希望它像本机应用程序一样工作。

使用代码时：

    <ReactCSSTransitionGroup
      transitionName={transitionValue}
      transitionEnterTimeout={500}
      transitionLeaveTimeout={500}
    >
    ...
    </ReactCSSTransitionGroup>

如何使transitionValue可以由Link组件设置或基于加载的路由？我不确定最好的方法。

感谢您的帮助！

Answer 1

我不确定这是否是最佳选择，但我已将query添加到链接，然后通过this.props.location.query.tran

进行访问

<ReactCSSTransitionGroup
  transitionName={this.props.location.query.tran || 'fade'}
  transitionEnterTimeout={500}
  transitionLeaveTimeout={500}
>
...
</ReactCSSTransitionGroup>

链接看起来像这样：

<Link to={{ pathname: '/role/1', query: { tran: 'coverLeft' }}}/>

希望这有助于某人。或者，如果有人有更好的方法，我很乐意听到它，因为我不喜欢我的解决方案弄脏了URL。

使用react-router动态更改路由动画

1 个答案: