1

我想知道如何使用 react router v4 和 react-router-config 设置 JS（非 css）动画。（我使用 GSAP 处理基本动画）

4

3 回答 3

1

找到了一个几乎相同设置的好例子。使用 Switch 组件设法让它与我的设置（React Transition Group V2、React Router v4 和 React Router Config）一起使用。

由于该示例不使用 React Router Config 并且 React Router Config 默认使用 Switch 进行编译（如检查元素 > React 选项卡中所示），我手动添加了 Switch。我这样做的原因是因为在 Switch 上没有 location={this.props.location} 属性，它会将新组件复制为进入和离开组件。

我很好奇我的硬编码开关如何否定自动渲染的开关。

            <TransitionGroup>
                <Transition
                    key={this.props.location.pathname}
                    onEnter={(node) => {
                        console.log(node, 'enter')
                    }}
                    onExit={(node) => {
                        console.log(node, 'exit')
                    }}
                    onExited={() => {
                        console.log('exited')
                    }}
                    timeout={{ enter: 300, exit: 200 }}
                >
                    <Switch location={this.props.location}>
                        {renderRoutes(this.props.route.routes)}
                    </Switch>
                </Transition>
            </TransitionGroup>
于 2018-02-06T21:28:33.290 回答
0

我为 react native 编写了一个组件。可以修改它以使用 react-spring 而不是 react 原生动画包并使用标准反应。

https://javascriptrambling.blogspot.com/2020/07/react-router-native-animatedswitch.html

于 2020-08-20T22:45:24.173 回答
0

您可以在自定义 Link组件上定义动画，如下所示：

<Link
  to="/some-path"
  transition="glide-right"
/>

但当然，这条路线会有很多工作要做......

有一个包，react-tiger-transition。

它确实使用了一些CSS，但主要的转换是由js完成的，如你所愿。

演示：

演示-gif

PS - 我是作者。

于 2020-01-31T12:53:59.353 回答