使用React Router进行动画过渡的介绍

In this article we’ll look at how to animate your route transitions with React Router by breaking down the ‘Animated Transitions’ example on the React Router docs.

在本文中，我们将通过分解React Router文档上的“ Animated Transitions”示例来研究如何使用React Router为您的路由过渡设置动画。

I’ve created a video to go with this article if you’d prefer that:

如果您愿意，我创建了一个与本文一起播放的视频：

If you’re reading this you’ve probably discovered that React Router doesn’t come with a solution for animated transitions out of the box. That ties into React Router’s philosophy. It gives you routing primitives that you can build on and trusts that you can figure out the rest.

如果您正在阅读本文，您可能已经发现React Router并没有开箱即用的动画过渡解决方案。 这与React Router的哲学联系在一起。 它为您提供了可以建立的路由原语，并相信您可以找出其余的原语。

Because every app has different needs, this approach is typically the safest. The downside of this is that it’ll take some extra work to get the exact functionality you want. The tool we’ll be using alongside React Router in this article is the React Transition Group.

因为每个应用程序都有不同的需求，所以这种方法通常是最安全的。 这样做的缺点是，需要花费一些额外的工作才能获得所需的确切功能。 我们将在本文中与React Router一起使用的工具是React Transition Group 。

React Transition Group is an animation library that gives us a way to perform animations when a React component enters or leaves the DOM. When paired with React Router, this is exactly what we want.

React Transition Group是一个动画库，当React组件进入或离开DOM时，它为我们提供了一种执行动画的方法。 与React Router配对时，这正是我们想要的。

Because there’s a lot going on in this article, there’s going to be some setup we need to take before we ever even start talking about animations. Feel free to skip ahead if you’d like.

因为本文中有很多事情要做，所以在开始谈论动画之前，我们需要进行一些设置。 如果愿意，可以跳过。

First, let’s walk through the type of app we’re going to be building.

首先，让我们逐步了解将要构建的应用程序的类型。

Animations aside, the goal is to make it so the user can go to /hsl/:h/:s/:l or /rgb/:r/:g/:b and see the associated HSL or RGB color for those specific values.

除了动画，目标是制作动画，以便用户可以转到/hsl/:h/:s/:l或/rgb/:r/:g/:b并查看与之相关的HSL或RGB颜色的这些特定值。

RGB颜色示例 (Example with an RGB color)

HSL颜色示例 (Example with an HSL color)

To do this, we’ll rely heavily on React Router URL Parameters. If you’re not familiar with those, I recommend reading this post before continuing.

为此，我们将严重依赖React Router URL参数。 如果您不熟悉这些内容，建议您在继续之前阅读本帖子 。

By looking at the images above, we know we’re going to need a few different things before we even start looking at animated transitions:

通过查看上面的图像，我们知道在开始看动画过渡之前，我们将需要一些不同的东西：

1. An app skeleton
   应用程序框架
2. A navbar
   导航栏

3. A component to render when the path matches /rgb/:r/:g/:b

   当路径与/rgb/:r/:g/:b匹配时呈现的组件

4. Another component to render when the path matches /hsl/:h/:s/:l

   当路径与/hsl/:h/:s/:l匹配时要呈现的另一个组件

5. Some Routes which are going to render the components we create in steps #4 and #5.

   一些Route会渲染我们在步骤4和5中创建的组件。

Let’s start off tackling #1. We’ll create a very basic component which renders a Router and has some styles applied to the main div so the background color will take up the whole view like seen in the example images above. We’ll use a very simple “CSS in JavaScript” for our styles.

让我们开始处理＃1。 我们将创建一个非常基本的组件，该组件呈现一个Router并在主div应用了一些样式，因此背景颜色将占据整个视图，如上例图像所示。 我们将使用非常简单的“ JavaScript中CSS”作为样式。

import React, { Component } from 'react'import {  BrowserRouter as Router,  Link,  Route, // for later  Redirect, // for later  Switch, // for later} from 'react-router-dom'

class App extends Component {  render() {    return (      <Router>        <div style={styles.fill}>

</div>      </Router>    )  }}

let styles = {}

styles.fill = {  position: 'absolute',  left: 0,  right: 0,  top: 0,  bottom: 0}

Cool. So our app really isn’t doing anything yet.

凉。 因此，我们的应用确实还没有执行任何操作。

Next, let’s move to the navbar. It should be pretty straightforward. We’ll have four Link components linking us between Red (/hsl/10/90/50), Green (/hsl/120/100/40), Blue (/rgb/33/150/243), and Pink (/rgb/240/98/146).

接下来，让我们转到导航栏。 它应该很简单。 我们将有四个Link组件在红色( /hsl/10/90/50 )，绿色( /hsl/120/100/40 )，蓝色( /rgb/33/150/243 /hsl/120/100/40 )和粉红色( /rgb/240/98/146 )。

class App extends Component {  render() {    return (      <Router>        <div style={styles.fill}>          <ul style={styles.nav}>            <NavLink to="/hsl/10/90/50">Red</NavLink>            <NavLink to="/hsl/120/100/40">Green</NavLink>            <NavLink to="/rgb/33/150/243">Blue</NavLink>            <NavLink to="/rgb/240/98/146">Pink</NavLink>          </ul>        </div>      </Router>    )  }}

const NavLink = (props) => (  <li style={styles.navItem}>    <Link {...props} style={
   { color: 'inherit' }}/>  </li>)

let styles = {}

styles.fill = {  position: 'absolute',  left: 0,  right: 0,  top: 0,  bottom: 0}

styles.nav = {  padding: 0,  margin: 0,  position: 'absolute',  top: 0,  height: '40px',  width: '100%',  display: 'flex'}

styles.navItem = {  textAlign: 'center',  flex: 1,  listStyleType: 'none',  padding: '10px'}

Solid. Next up, we want to build a “component to render when the path matches /rgb/:r/:g/:b”. This is where the URL parameters will come into play.

固体。 接下来，我们要构建一个“当路径与/rgb/:r/:g/:b匹配时呈现的组件”。 这是URL参