国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【譯】只需四個步驟:使用 React 實現頁面過渡動畫

moven_j / 1433人閱讀

摘要:翻譯瘋狂的技術宅作者英文標題英文地址說明本文首發于公眾號在本文中,我將向你展示如何使用和庫中的生命周期方法來實現頁面的過渡效果。我們還用創建了一個變量,可以用它來對封裝的子組件中的的不同樣式屬性實現動畫效果。用渲染,并且或者插入動畫狀態值。

翻譯:瘋狂的技術宅
作者:Martin Haagensli
英文標題:Animated page transitions with React Router 4, ReactTransitionGroup and Animated
英文地址:https://hackernoon.com/animat...
說明:本文首發于公眾號:jingchengyideng

在本文中,我將向你展示如何使用 ReactTransitionGroup 和 Animated 庫中的生命周期方法來實現頁面的過渡效果。

你可以通過這個視頻 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(
 
   
 ,
 document.getElementById("root")
);
registerServiceWorker();

然后添加兩個需要渲染的組建,首先是 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 文件并修改內容為:

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 的內容,并把下面的代碼復制到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導入你的 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;
};

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

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

您現在可以訪問新的生命周期方法了,比如 componentWillAppear()componentWillEnter()componentWillLeave()

讓我們用它們來制作一個更高級的組件來實現我的的動畫路由效果,現在好戲開場了!

4、創建Animated Wrapper 并用 Animated 實現動畫

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

這里有很多東西,我來解釋一下。

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

然后我們需要在每個路由組件中導入它,然后像這樣將它們封裝起來:

修改 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;

就這樣,現在你的頁面切換效果應該是動態的了!

擴展閱讀

我建議通過Animated文檔來學習,但是現在相關文檔很少。我們實用的Animated.template函數在 Github-issues 以外的地方幾乎找不到。它的文檔在這里:http://animatedjs.github.io/i...。
你可以通過下面的鏈接下載Demo的演示視頻:
http://animate.mhaagens.me/
或者:
https://github.com/mhaagens/a...

也可以關注我在Medium的博客或者我的Twitter,來學習更多 React 相關的內容。
https://twitter.com/mhaagens

歡迎掃描二維碼關注公眾號,每天第一時間推送我翻譯的國外最新技術文章。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84706.html

相關文章

  • 2017-08-08 前端日報

    摘要:前端日報精選一行代碼的逆向工程譯只需四個步驟使用實現頁面過渡動畫如何實現一個基于的模板引擎解剖組件的多種寫法與演進深入理解筆記擴展對象的功能性中文基礎系列一之實現抽獎刮刮卡橡皮擦掘金小游戲個人文章和最常用的特征眾成翻譯常用語法總 2017-08-08 前端日報 精選 一行 JavaScript 代碼的逆向工程【譯】只需四個步驟:使用 React 實現頁面過渡動畫如何實現一個基于 DOM...

    alin 評論0 收藏0
  • 一個App完成入門篇(二)-搭建主框架

    摘要:一個完成入門篇二搭建主框架通過第一課的學習,你已經掌握了如何通過調試器來跟上的設計器聯調來實時查看設計效果調試代碼了,接下來通過一系列的開發教學你將很快上手學習到如何開發一個真正的。 一個App完成入門篇(二)-搭建主框架 通過第一課的學習,你已經掌握了如何通過debug調試器來跟PC上的設計器聯調來實時查看UI設計效果、調試代碼了,接下來通過一系列的demo開發教學你將很快上手學習到...

    whatsns 評論0 收藏0
  • 一個App完成入門篇(二)-搭建主框架

    摘要:一個完成入門篇二搭建主框架通過第一課的學習,你已經掌握了如何通過調試器來跟上的設計器聯調來實時查看設計效果調試代碼了,接下來通過一系列的開發教學你將很快上手學習到如何開發一個真正的。 一個App完成入門篇(二)-搭建主框架 通過第一課的學習,你已經掌握了如何通過debug調試器來跟PC上的設計器聯調來實時查看UI設計效果、調試代碼了,接下來通過一系列的demo開發教學你將很快上手學習到...

    DevTalking 評論0 收藏0
  • 一個App完成入門篇(二)-搭建主框架

    摘要:一個完成入門篇二搭建主框架通過第一課的學習,你已經掌握了如何通過調試器來跟上的設計器聯調來實時查看設計效果調試代碼了,接下來通過一系列的開發教學你將很快上手學習到如何開發一個真正的。 一個App完成入門篇(二)-搭建主框架 通過第一課的學習,你已經掌握了如何通過debug調試器來跟PC上的設計器聯調來實時查看UI設計效果、調試代碼了,接下來通過一系列的demo開發教學你將很快上手學習到...

    maybe_009 評論0 收藏0
  • 正在失業中的《課多周刊》(第3期)

    摘要:正在失業中的課多周刊第期我們的微信公眾號,更多精彩內容皆在微信公眾號,歡迎關注。若有幫助,請把課多周刊推薦給你的朋友,你的支持是我們最大的動力。是一種禍害譯本文淺談了在中關于的不好之處。淺談超時一運維的排查方式。 正在失業中的《課多周刊》(第3期) 我們的微信公眾號:fed-talk,更多精彩內容皆在微信公眾號,歡迎關注。 若有幫助,請把 課多周刊 推薦給你的朋友,你的支持是我們最大的...

    robin 評論0 收藏0

發表評論

0條評論

moven_j

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<