【譯】只需四個(gè)步驟：使用 React 實(shí)現(xiàn)頁(yè)面過(guò)渡動(dòng)畫

moven_j 發(fā)布于2019-08-20 18:34 / 1447人閱讀

摘要：翻譯瘋狂的技術(shù)宅作者英文標(biāo)題英文地址說(shuō)明本文首發(fā)于公眾號(hào)在本文中，我將向你展示如何使用和庫(kù)中的生命周期方法來(lái)實(shí)現(xiàn)頁(yè)面的過(guò)渡效果。我們還用創(chuàng)建了一個(gè)變量，可以用它來(lái)對(duì)封裝的子組件中的的不同樣式屬性實(shí)現(xiàn)動(dòng)畫效果。用渲染，并且或者插入動(dòng)畫狀態(tài)值。

翻譯：瘋狂的技術(shù)宅
作者：Martin Haagensli
英文標(biāo)題：Animated page transitions with React Router 4, ReactTransitionGroup and Animated
英文地址：https://hackernoon.com/animat...
說(shuō)明：本文首發(fā)于公眾號(hào)：jingchengyideng

在本文中，我將向你展示如何使用 ReactTransitionGroup 和 Animated 庫(kù)中的生命周期方法來(lái)實(shí)現(xiàn)頁(yè)面的過(guò)渡效果。

你可以通過(guò)這個(gè)視頻 http://animate.mhaagens.me 來(lái)觀看演示效果。

讓我們看看該怎樣設(shè)置一些簡(jiǎn)單的路由動(dòng)畫！

1、安裝React

首先安裝 React 并創(chuàng)建一個(gè) React 應(yīng)用程序，很簡(jiǎn)單的就能創(chuàng)建一個(gè) React 項(xiàng)目并讓它運(yùn)行。

如果你還沒(méi)有安裝 Create React App 就先裝好（如果你已經(jīng)安裝，就跳過(guò)這一步）：

npm install -g create-react-app

然后創(chuàng)建我們的項(xiàng)目：

create-react-app animatedroutes && cd animatedroutes

接下來(lái)安裝 routes 和 animation 包：

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

現(xiàn)在用你喜歡的編輯器打開項(xiàng)目，并運(yùn)行它：

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(
 
   
 ,
 document.getElementById("root")
);
registerServiceWorker();

然后添加兩個(gè)需要渲染的組建，首先是 src/Home.js :

import React, { Component } from "react";
export default class Home extends Component {
 render() {
  return (
   
    Home
    Hello from the home page!
   
  )
 }
}

接著是 src/Subpage.js:

import React, { Component } from "react";
export default class Subpage extends Component {
 render() {
  return (
   
    Subpage
    Hello from a sub page!
   
  )
 }
}

下面打開src/App.js 文件并修改內(nèi)容為：

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 (
      
        
          Home
          Subpage
        
          
          
      
    );
  }
}
export default App;

最后刪除 src/App.css 的內(nèi)容，并把下面的代碼復(fù)制到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;
}

好了，現(xiàn)在可以通過(guò)路由在主頁(yè)面和子頁(yè)面之間進(jìn)行導(dǎo)航了。

3、添加 TransitionGroup

現(xiàn)在開始添加動(dòng)畫效果。我們需要做一些微不足道的工作來(lái)實(shí)現(xiàn)它。

現(xiàn)在，我們不再用默認(rèn)的方式設(shè)置路由，而是要使用路由渲染方法來(lái)去渲染前面的組件，并將其封裝到一個(gè)中。

首先把TransitionGroup導(dǎo)入你的 src/App.js，像這樣：

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

然后我們必須為 TransitionGroup 添加一個(gè)特殊的函數(shù)來(lái)渲染子組件。在 src/App.js 文件中class App extends ... 的前面添加這個(gè)函數(shù)：

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

然后刪除你的路由，并替換成下面的代碼：

 (
    
      {match && }
    
)}/>
 (
     
       {match && }
     
)}/>

您現(xiàn)在可以訪問(wèn)新的生命周期方法了，比如 componentWillAppear()，componentWillEnter()和componentWillLeave()。

讓我們用它們來(lái)制作一個(gè)更高級(jí)的組件來(lái)實(shí)現(xiàn)我的的動(dòng)畫路由效果，現(xiàn)在好戲開場(chǎng)了！

4、創(chuàng)建Animated Wrapper 并用 Animated 實(shí)現(xiàn)動(dòng)畫

創(chuàng)建src/AnimatedWrapper.js文件并復(fù)制下面的代碼到文件中：

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)
  };
 }
 render() {
  return (
   
    
   
  );
 }
};
export default AnimatedWrapper;

這里有很多東西，我來(lái)解釋一下。

我們用component來(lái)包裝我們的路由組件。它將從 TransitionGroup 接收生命周期方法，我們可以用它來(lái)實(shí)現(xiàn)動(dòng)畫效果。
我們還用 Animated 創(chuàng)建了一個(gè)變量，可以用它來(lái)對(duì)封裝的子組件中的 div 的不同樣式屬性實(shí)現(xiàn)動(dòng)畫效果。

讓我們添加一些生命周期方法給組件添加動(dòng)畫效果。用Animated.template渲染，并且／或者插入動(dòng)畫狀態(tài)值。

按照下面的代碼修改src/AnimatedWrapper.js文件內(nèi)容：

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 (
   
    
   
  );
 }
};
export default AnimatedWrapper;

然后我們需要在每個(gè)路由組件中導(dǎo)入它，然后像這樣將它們封裝起來(lái)：

修改 src/Home.js 如下：

import React, { Component } from "react";
import AnimatedWrapper from "./AnimatedWrapper";
class HomeComponent extends Component {
 render() {
  return (
   
    Home
    Hello from the home page!
   
  )
 }
}
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 (
   
    Subpage
    Hello from a sub page!
   
  )
 }
}
const Subpage = AnimatedWrapper(SubpageComponent);
export default Subpage;

就這樣，現(xiàn)在你的頁(yè)面切換效果應(yīng)該是動(dòng)態(tài)的了！

擴(kuò)展閱讀

我建議通過(guò)Animated文檔來(lái)學(xué)習(xí)，但是現(xiàn)在相關(guān)文檔很少。我們實(shí)用的Animated.template函數(shù)在 Github-issues 以外的地方幾乎找不到。它的文檔在這里：http://animatedjs.github.io/i...。
你可以通過(guò)下面的鏈接下載Demo的演示視頻：
http://animate.mhaagens.me/
或者：
https://github.com/mhaagens/a...

也可以關(guān)注我在Medium的博客或者我的Twitter，來(lái)學(xué)習(xí)更多 React 相關(guān)的內(nèi)容。
https://twitter.com/mhaagens

歡迎掃描二維碼關(guān)注公眾號(hào)，每天第一時(shí)間推送我翻譯的國(guó)外最新技術(shù)文章。