next page transitions下載 - next page transitions源代碼下載

next page transitions

Ai源碼

v1.0.0-beta.2

下載

下頁過渡

Next.js應用程序簡單且可自定義的頁面過渡

演示： https：//next-page-transitions.now.sh/

這個圖書館為我做什麼？

簡而言之，它可以輕鬆地將頁面過渡添加到Next.js構建的應用程序中。它可能與其他框架一起使用，但它是圍繞新的App組件和接下來的方式設計的。 JS處理頁面。具體而言，它解決了確保一次僅安裝一個頁面組件的問題，並且直到上一頁完成其出口動畫之前，下一頁才掛起。如果您的頁面組件必須加載數據，則它還具有內置的支持，以顯示加載指示器。

例子

如果您希望以身作則學習，請查看一些examples目錄，以說明如何使用此庫。

入門

首先，安裝軟件包：

 npm install --save next-page-transitions

接下來，確保您的應用具有自定義App組件；如果不是，請在Next.js readme上按照以下示例創建一個示例。然後，在您的App的渲染方法中，將頁面Component包裝在PageTransition組件中。您還必須定義自己的CSS課程，以實現所需的過渡動畫。為了使該庫變得簡單，並說明了人們生產和消費CSS的多種方式，它沒有提供任何內置樣式，並且對您的頁面最終如何最終出現在您的頁面上。下面的示例具有簡單的過渡，可以淡入頁面中的頁面。

 import App , { Container } from 'next/app'
import React from 'react'
import { PageTransition } from 'next-page-transitions'

export default class MyApp extends App {
  static async getInitialProps ( { Component , router , ctx } ) {
    let pageProps = { }

    if ( Component . getInitialProps ) {
      pageProps = await Component . getInitialProps ( ctx )
    }

    return { pageProps }
  }

  render ( ) {
    const { Component , pageProps , router } = this . props
    return (
      < Container >
        < PageTransition timeout = { 300 } classNames = "page-transition" >
          < Component { ... pageProps } key = { router . route } />
        </ PageTransition >
        < style jsx global > { `
          .page-transition-enter {
            opacity: 0;
          }
          .page-transition-enter-active {
            opacity: 1;
            transition: opacity 300ms;
          }
          .page-transition-exit {
            opacity: 1;
          }
          .page-transition-exit-active {
            opacity: 0;
            transition: opacity 300ms;
          }
        ` } </ style >
      </ Container >
    )
  }
}

當您移動到新頁面時， key道具將會更改， PageTransition組件將檢測到這一點。它不會立即卸載頁面，而是將page-transition-exit類應用於頁面周圍的包裝器以初始化“退出”過渡，然後將應用page-transition-exit-active類以及開始過渡。這與反應轉變組庫的工作方式非常相似。在上一頁被動畫化之後，將安裝新頁面，並將應用類似的.page-transition-enter和page-transition-enter-active類。每當新頁面導航到新頁面時，此過程都會重複。

注意：在以前版本的next-page-transitions中，沒有必要指定有關PageTransition兒童的key道具。但是，要使熱模塊重新加載正常工作，有必要進行此道具。移動Foward，未指定key道具的孩子會引發控制台的警告。將來，這可能會成為運行時錯誤。

支持延遲進入

假設您有一個頁面，需要在顯示其內容之前提出網絡請求。您可以讓頁面本身呈現一個加載旋轉器，直到準備就緒，但是隨後您將失去了所有時間完善的美麗頁面過渡動畫。幸運的是，該庫使處理情況變得易於處理。

如果將靜態屬性pageTransitionDelayEnter = true添加到頁面組件中，則頁面將通過特殊的回調道具，您可以用來指出所有內容都已經完成加載。同時，您的頁面將被安裝，但是尚未啟動Enter Transition，並且您選擇的加載指標將在其位置顯示。當您調用回調道具時，將隱藏加載旋轉器，並且您的頁面將被動畫到位！默認情況下，回調是通過pageTransitionReadyToEnter Prop傳遞的，但是可以通過在PageTransition組件上設置loadingCallbackName Prop來指定這一點。

注意：確保您的組件從其render()函數中返回null ，直到完成其內容並準備好進行動畫為止。您的頁面在加載時仍將在React組件樹中！

“但是我的網絡請求通常很快！” “他們通常只花幾百毫秒，我不想在這麼短的時間內在屏幕上閃爍加載指示器！”該庫也可以處理該案例。如果指定了loadingDelay支柱，則直到經過這麼長時間才顯示加載指示器。如果您的組件準備在此之前輸入，則永遠不會顯示加載指示器，保持UX清潔和活潑。但是，如果您的組件花費了很長時間，則將顯示加載指示器，直到您的組件準備就緒為止。

“這聽起來有點像從那個反應懸疑談話中的佔位符概念。這個YouTube視頻中的一個。”是的，是的！這是此功能的靈感。

這是一個示例組件，該組件模擬具有超時的網絡請求：

 class About extends React . Component {
  static pageTransitionDelayEnter = true

  constructor ( props ) {
    super ( props )
    this . state = { loaded : false }
  }

  componentDidMount ( ) {
    this . timeoutId = setTimeout ( ( ) => {
      this . props . pageTransitionReadyToEnter ( )
      this . setState ( { loaded : true } )
    } , 2000 )
  }

  componentWillUnmount ( ) {
    if ( this . timeoutId ) clearTimeout ( this . timeoutId )
  }

  render ( ) {
    if ( ! this . state . loaded ) return null
    return < div > Hello, world! </ div >
  }
}

暫時假設您的Loader組件可以呈現出一個不錯的旋轉加載指示器。您必須告訴PageTransition組件要使用此組件，以及要等待多長時間直到顯示網絡指示器：

 <PageTransition
  timeout={300}
  classNames="page-transition"
  loadingComponent={<Loader />}
  loadingDelay={500}
  loadingTimeout={{
    enter: 400,
    exit: 0,
  }}
  loadingClassNames="loading-indicator"
>
  <Component {...pageProps} key={router.route} />
</PageTransition>

如果您希望加載指示器在屏幕上/關閉屏幕上進行動畫，則還必須添加樣式。如果您希望它出現/消失而無需任何動畫，則可以添加loadingTimeout={0}並省略loadingClassNames屬性。

在examples目錄下查看delayed-enter應用程序，以獲取一個完整的示例。 “大約”頁面（ pages/about.js ）將等待2秒鐘，然後顯示其內容，與此同時，將顯示components/Loader.js組件。玩各種延遲，以更深入地了解該組件的工作原理。

`PageTransition`道具

classNames ：指定將應用於頁麵包裝器的類名稱以驅動頁面過渡動畫。類似於react-transition-group的CSSTranstition組件的classNames 。但是，請注意，目前僅支持該道具的字符串形式。另外，請注意，該庫沒有單獨的“出現”狀態；僅需要“輸入”和“退出”類。
tag ：指定將用於渲染頁麵包裝器的標籤或組件。此元素將接收classNames Prop。如果您想使用語義標記，例如，如果要渲染頁麵包裝器main ，或者需要進一步自定義頁麵包裝器的樣式或行為，這將很有用。
timeout ：指定頁面過渡動畫的超時。類似於react-transition-group的CSSTranstition組件的timeout道具。
loadingComponent ：要顯示的一個反應元素
loadingDelay ：以毫秒為單位顯示加載指示器之前等待的持續時間。如果頁面在此持續時間過去之前完成加載，則永遠不會顯示加載組件。默認為500ms。
loadingCallbackName ：指定頁面完成加載後將收到的道具的名稱。默認為pageTransitionReadyToEnter
loadingTimeout ：類似於react-transition-group的CSSTranstition組件的timeout道具。如果將此道具設置為0 ，則不會在屏幕上/關閉屏幕上使用加載指示器進行動畫。
loadingClassNames ：指定將應用於加載組件的類名，如果指定了一個名稱。類似於react-transition-group的CSSTranstition組件的classNames 。
monkeyPatchScrolling ：默認情況下，每當單擊時，Next的Link組件將滾動到頁面頂部；當頁面過渡時，這可能會產生不良的跳躍效果。如果在安裝組件時將此道具設置為true ，則將window.scrollTo進行猴子繪製，以便在頁面過渡時可以禁用編程滾動。默認為false，因為這種潛在的粗略行為應選擇加入。
skipInitialTransition ：指定在第一個安裝座上省略頁面過渡。如果您只想在頁面之間進行過渡，而不是在第一頁加載下，請將skipInitialTransition設置為true 。默認情況下， skipInitialTransition設置為false 。