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がページを処理する方法を中心に設計されています。具体的には、一度に1つのページコンポーネントのみがマウントされ、前のページがExitアニメーションを完了するまで次のページがマウントされないことを確認する問題を解決します。また、ページコンポーネントがデータを表示する前にデータをロードする必要がある場合、ロードインジケーターを表示するためのサポートも組み込まれています。

例

例で学習したい場合は、このライブラリの使用方法を示すnext.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クラスも適用してトランジションを開始します。これは、React-Transition-Groupライブラリがどのように物事を行うかと非常に似ています。前のページがアニメーション化された後、新しいページがマウントされ、同様のページの.page-transition-enterとpage-transition-enter-activeクラスが適用されます。このプロセスは、新しいページがナビゲートされるたびに繰り返されます。

注： next-page-transitionsの以前のバージョンでは、 PageTransitionの子供のkey小道具を指定する必要はありませんでした。ただし、ホットモジュールのリロード作業を正しく正しくするには、この小道具を必要とする必要がありました。動きを動かすと、 keyプロップを指定しない子供は、コンソールで警告をトリガーします。将来、これはランタイムエラーになる可能性があります。

遅延した入力のサポート

コンテンツを表示する前にネットワークリクエストを作成する必要があるページがあるとします。ページ自体が準備が整うまでロードスピナーをレンダリングすることもできますが、その時間を完璧に費やした美しいページトランジションアニメーションを失います。幸いなことに、このライブラリはそのケースを簡単に処理できます。

staticプロパティpageTransitionDelayEnter = trueにPAGETRANSITIONDELAYENTERを追加すると、ページには、すべてがロードが終了したことを示すために使用できる特別なコールバックプロップが渡されます。それまでの間、ページはマウントされますが、Enter Transitionはまだ開始されておらず、選択したロードインジケーターがその場所に表示されます。コールバックプロップを呼び出すと、ロードスピナーが非表示になり、ページが所定の位置にアニメーション化されます！デフォルトでは、コールバックはpageTransitionReadyToEnter Propを介して渡されますが、これはPageTransitionコンポーネントにloadingCallbackNameプロップを設定することで指定できます。

注：コンポーネントがコンテンツの読み込みが完了し、アニメーション化する準備ができるまで、コンポーネントがrender()関数からnullを返すようにしてください。

「しかし、私のネットワークリクエストは通常高速です！」と言うでしょう。「彼らは通常数百ミリ秒しかかからないので、私はこのような短い期間、画面上でロードインジケーターをフラッシュしたくありません！」このライブラリもそのケースを処理できます。 loadingDelay Propを指定した場合、それほど多くの時間が経過するまでローディングインジケーターは表示されません。コンポーネントがそれ以前に入力する準備ができている場合、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 Directoryの下にあるdelayed-enterアプリをチェックしてください。「About」ページ（ pages/about.js ）は、コンテンツを表示する前に2秒待機し、その間にcomponents/Loader.jsのコンポーネントが表示されます。さまざまな遅延を遊んで、このコンポーネントがどのように機能するかをより深く感じることができます。

`PageTransition`小道具

classNames ：ページラッパーに適用されるクラス名を指定して、ページトランジションアニメーションを駆動します。 react-transition-groupのCSSTranstitionコンポーネントのclassNamesプロップに類似しています。ただし、その小道具の文字列形式のみが現在サポートされていることに注意してください。また、このライブラリには別の「表示」状態がないことに注意してください。「Enter」と「Exit」クラスのみが必要です。
tag ：ページラッパーのレンダリングに使用されるタグまたはコンポーネントを指定します。この要素には、 classNamesプロップが届きます。これは、セマンティックマークアップを使用する場合に役立ちます。たとえば、ページラッパーを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 ：デフォルトでは、[次のLinkコンポーネント]がクリックするたびにページの上部にスクロールします。これは、ページが移行しているときに、望ましくない衝突効果をもたらす可能性があります。コンポーネントがマウントされているときにこの小道具がtrueに設定されている場合、 window.scrollToがモンキーパッチされ、ページが遷移している間にプログラマティックスクロールが無効になるようになります。この潜在的に大ざっぱな動作はオプトインする必要があるため、デフォルトです。
skipInitialTransition ：First Mountでページの移行が省略されるかどうかを指定します。最初のページのロードではなく、ページ間でのみ移行を行う場合は、 skipInitialTransition trueに設定します。デフォルトでは、 skipInitialTransitionはfalseに設定されています。