只需4个步骤：使用 React 实现页面过渡动画

梦里梦外; 2022-06-10 01:40 708阅读 0赞

# 使用 React 实现页面过渡动画（React Router 4、ReactTransitionGroup、Animated） #

> 翻译：疯狂的技术宅  
> 作者：Martin Haagensli  
> 英文标题：Animated page transitions with React Router 4, ReactTransitionGroup and Animated  
> 英文地址：[https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a][https_hackernoon.com_animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a]  
> 本文首发于公众号：jingchengyideng

![1_FwBsmSdOx7AYfd944d4RYQ.png][]  
在本文中，我将向你展示如何使用 ReactTransitionGroup 和 Animated 库中的生命周期方法来实现页面的过渡效果。

你可以通过这个视频 [http://animate.mhaagens.me][http_animate.mhaagens.me] 来观看演示效果。

让我们看看该怎样设置一些简单的路由动画！

## 1、安装React ##

首先安装 React 并创建一个 React 应用程序，很简单的就能创建一个 React 项目并让它运行。

如果你还没有安装 Create React App 就先装好（如果你已经安装，就跳过这一步）：

npm install -g create-react-app

然后创建我们的项目：

create-react-app animatedroutes && cd animatedroutes

接下来安装 routes 和 animation 包：

yarn add react-router-dom animated react-transition-group

现在用你喜欢的编辑器打开项目，并运行它：

npm start

# 2、添加 React 路由 #

打开 `src/index.js` 文件，给 React 添加 BrowserRouter

import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter } from "react-router-dom";
    import App from "./App";
    import registerServiceWorker from "./registerServiceWorker";
    import "./index.css";
    ReactDOM.render(
     <BrowserRouter> <App /> </BrowserRouter>, document.getElementById("root") ); registerServiceWorker();

然后添加两个需要渲染的组建，首先是 `src/Home.js` :

import React, { Component } from "react";
    export default class Home extends Component {
     render() {
      return (
       <div className="page"> <h1>Home</h1> <p>Hello from the home page!</p> </div> ) } }

接着是 `src/Subpage.js`:

import React, { Component } from "react";
    export default class Subpage extends Component {
     render() {
      return (
       <div className="page"> <h1>Subpage</h1> <p>Hello from a sub page!</p> </div> ) } }

下面打开`src/App.js` 文件并修改内容为：

import React, { Component } from 'react';
    import { Route, Link } from "react-router-dom";
    import Home from "./Home";
    import Subpage from "./Subpage";
    class App extends Component {
      render() {
        return (
          <div className="App"> <div className="TopBar"> <Link to="/">Home</Link> <Link to="/subpage">Subpage</Link> </div> <Route exact path="/" component={Home} /> <Route exact path="/subpage" component={Subpage} /> </div> ); } } export default App;

最后删除 `src/App.css` 的内容，并把下面的代码复制到`src/index.css` 文件中：

html,
    body,
    #root { height: 100%; width: 100%; }
    body { margin: 0; padding: 0; font-family: sans-serif; }
    .App { position: relative; display: flex; flex-flow: column; }
    .TopBar { position: fixed; top: 0; left: 0; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; height: 62px; padding: 0 24px; }
    .TopBar a { margin-right: 18px; text-decoration: none; }
    .animated-page-wrapper { position: absolute; top: 62px; left: 0; width: 100%; height: 100%; }
    .page { padding: 0 24px; }

好了，现在可以通过路由在主页面和子页面之间进行导航了。

## 3、添加 TransitionGroup ##

现在开始添加动画效果。我们需要做一些微不足道的工作来实现它。

现在，我们不再用默认的方式设置路由，而是要使用路由渲染方法来去渲染前面的组件，并将其封装到一个`<TransitionGroup />`中。

首先把TransitionGroup导入你的 `src/App.js`，像这样：

import TransitionGroup from "react-transition-group/TransitionGroup";

然后我们必须为 TransitionGroup 添加一个特殊的函数来渲染子组件。在 `src/App.js` 文件中`class App extends ...`的前面添加这个函数：

const firstChild = props => {
      const childrenArray = React.Children.toArray(props.children);
      return childrenArray[0] || null;
    };

然后删除你的路由，并替换成下面的代码：

<Route exact path="/" children={({ match, ...rest }) => (
        <TransitionGroup component={firstChild}>
          {match && <Home { ...rest} />}
        </TransitionGroup>
    )}/>
    <Route path="/subpage" children={({ match, ...rest }) => (
         <TransitionGroup component={firstChild}>
           {match && <Subpage { ...rest} />}
         </TransitionGroup>
    )}/>

您现在可以访问新的生命周期方法了，比如 `componentWillAppear()`，`componentWillEnter()`和`componentWillLeave()`。

让我们用它们来制作一个更高级的组件来实现我的的动画路由效果，现在好戏开场了！

# 4、创建Animated Wrapper 并用 Animated 实现动画 #

创建`src/AnimatedWrapper.js`文件并复制下面的代码到文件中：

这里有很多东西，我来解释一下。

我们用component来包装我们的路由组件。它将从 TransitionGroup 接收生命周期方法，我们可以用它来实现动画效果。  
我们还用 Animated 创建了一个变量，可以用它来对封装的子组件中的 div 的不同样式属性实现动画效果。

让我们添加一些生命周期方法给组件添加动画效果。用`Animated.template`渲染，并且／或者插入动画状态值。

按照下面的代码修改`src/AnimatedWrapper.js`文件内容：

import React, { Component } from "react";
    import * as Animated from "animated/lib/targets/react-dom";
    const AnimatedWrapper = WrappedComponent => class AnimatedWrapper
     extends Component {
     constructor(props) {
      super(props);
      this.state = {
       animate: new Animated.Value(0)
      };
     }
     componentWillAppear(cb) {
      Animated.spring(this.state.animate, { toValue: 1 }).start();
      cb();
     }
     componentWillEnter(cb) {
      setTimeout(
       () => Animated.spring(this.state.animate, { toValue: 1 }).start(),
       250
      );
      cb();
     }
     componentWillLeave(cb) {
      Animated.spring(this.state.animate, { toValue: 0 }).start();
      setTimeout(() => cb(), 175);
     }
     render() {
      const style = {
       opacity: Animated.template`${
       this.state.animate}`,
       transform: Animated.template`
        translate3d(0,${
       this.state.animate.interpolate({
        inputRange: [0, 1],
        outputRange: ["12px", "0px"]
       })},0)
       `
      };
      return (
       <Animated.div style={style} className="animated-page-wrapper"> <WrappedComponent { ...this.props} /> </Animated.div> ); } }; export default AnimatedWrapper;

然后我们需要在每个路由组件中导入它，然后像这样将它们封装起来：

修改 `src/Home.js` 如下：

import React, { Component } from "react";
    import AnimatedWrapper from "./AnimatedWrapper";
    class HomeComponent extends Component {
     render() {
      return (
       <div className="page"> <h1>Home</h1> <p>Hello from the home page!</p> </div> ) } } const Home = AnimatedWrapper(HomeComponent); export default Home;

修改 `src/Subpage.js` 如下：

import React, { Component } from "react";
    import AnimatedWrapper from "./AnimatedWrapper";
    class SubpageComponent extends Component {
     render() {
      return (
       <div className="page"> <h1>Subpage</h1> <p>Hello from a sub page!</p> </div> ) } } const Subpage = AnimatedWrapper(SubpageComponent); export default Subpage;

就这样，现在你的页面切换效果应该是动态的了！

## 扩展阅读 ##

我建议通过Animated文档来学习，但是现在相关文档很少。我们实用的`Animated.template`函数在 Github-issues 以外的地方几乎找不到。它的文档在这里：[http://animatedjs.github.io/interactive-docs/][http_animatedjs.github.io_interactive-docs]。  
你可以通过下面的链接下载Demo的演示视频：  
[http://animate.mhaagens.me/][http_animate.mhaagens.me 1]  
或者：  
[https://github.com/mhaagens/animated\_routes\_react][https_github.com_mhaagens_animated_routes_react]

也可以关注我在Medium的博客或者我的Twitter，来学习更多 React 相关的内容。  
[https://twitter.com/mhaagens][https_twitter.com_mhaagens]

--------------------

欢迎扫描二维码关注公众号，每天第一时间推送我翻译的国外最新技术文章。

![SouthEast][]

[https_hackernoon.com_animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a]: https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a
[1_FwBsmSdOx7AYfd944d4RYQ.png]: https://cdn-images-1.medium.com/max/1000/1*FwBsmSdOx7AYfd944d4RYQ.png
[http_animate.mhaagens.me]: http://animate.mhaagens.me
[http_animatedjs.github.io_interactive-docs]: http://animatedjs.github.io/interactive-docs/
[http_animate.mhaagens.me 1]: http://animate.mhaagens.me/
[https_github.com_mhaagens_animated_routes_react]: https://github.com/mhaagens/animated_routes_react
[https_twitter.com_mhaagens]: https://twitter.com/mhaagens
[SouthEast]: /images/20220610/133bbed22c0a4475bb43ec239582ea25.png