如何使用 JS 为 react router v4（使用 react-router-config）制作动画

Question

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

Answer 1

Found a good example with an almost identical setup。使用 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} 属性，它将复制新组件作为进入和离开组件。

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

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

Answer 2

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

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

但是路线当然会有很多工作要做...

有一个包，react-tiger-transition。

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

演示：

PS - 我是作者。

Answer 3

我为 React Native 写了一个组件。它可以修改为使用 react-spring 而不是反应本机动画包并与标准反应一起工作。

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

如何使用 JS 为 react router v4（使用 react-router-config）制作动画

How to animate react router v4 (with react-router-config) with JS

gsap

react-router

react-transition-group