next page transitions

transisi halaman berikutnya

Transisi Halaman Sederhana dan Dapat Disesuaikan untuk Aplikasi Next.js

Demo: https://next-page-transitions.now.sh/

Apa yang dilakukan perpustakaan ini untuk saya?

Sederhananya, memudahkan untuk menambahkan transisi halaman ke aplikasi build dengan next.js. Ini mungkin bekerja dengan kerangka kerja lain, tetapi dirancang di sekitar komponen App baru dan cara yang selanjutnya. JS menangani halaman. Secara khusus, ini memecahkan masalah untuk memastikan hanya satu komponen halaman yang dipasang pada satu waktu dan bahwa halaman berikutnya tidak dipasang sampai yang sebelumnya telah menyelesaikan animasi keluarnya. Ini juga memiliki dukungan bawaan untuk menunjukkan indikator pemuatan jika komponen halaman Anda harus memuat data sebelum dapat ditampilkan.

Contoh

Jika Anda lebih suka belajar dengan contoh, lihat direktori examples untuk beberapa aplikasi selanjutnya.js yang menunjukkan bagaimana perpustakaan ini dapat digunakan.

Memulai

Pertama, instal paket:

 npm install --save next-page-transitions

Selanjutnya, pastikan aplikasi Anda memiliki komponen App khusus; Jika tidak, ikuti contoh pada readme next.js untuk membuat satu. Kemudian, dalam metode render App Anda, bungkus Component halaman dalam komponen PageTransition . Anda juga harus mendefinisikan kelas CSS Anda sendiri yang mencapai animasi transisi yang Anda inginkan. Untuk menjaga perpustakaan ini sederhana dan untuk menjelaskan berbagai cara yang diproduksi dan dikonsumsi orang, tidak menawarkan gaya bawaan dan tidak memiliki pendapat khusus tentang bagaimana gaya berakhir di halaman Anda. Contoh di bawah ini memiliki transisi sederhana yang memudar halaman masuk dan keluar.

 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 >
    )
  }
}

Saat Anda pindah ke halaman baru, prop key akan berubah, dan komponen PageTransition akan mendeteksi itu. Alih-alih segera melepas halaman, itu akan menerapkan kelas page-transition-exit ke pembungkus di sekitar halaman untuk menginisialisasi transisi "keluar", dan kemudian akan menerapkan kelas page-transition-exit-active juga untuk memulai transisi. Ini sangat mirip dengan bagaimana perpustakaan group transisi reaksi melakukan sesuatu. Setelah halaman sebelumnya dianimasikan, halaman baru dipasang dan sepasang .page-transition-enter dan kelas page-transition-enter-active yang serupa akan diterapkan. Proses ini mengulangi setiap kali halaman baru dinavigasi.

CATATAN : Dalam versi sebelumnya dari next-page-transitions , tidak perlu menentukan prop key pada anak-anak PageTransition . Namun, untuk membuat pemuatan ulang modul panas berfungsi dengan benar, perlu membuat alat peraga ini diperlukan. Bergerak Foward, anak -anak yang tidak menentukan prop key akan memicu peringatan di konsol. Di masa depan, ini mungkin menjadi kesalahan runtime.

Dukungan untuk Enters Tertunda

Misalkan Anda memiliki halaman yang perlu membuat permintaan jaringan sebelum dapat menampilkan kontennya. Anda dapat memiliki halaman itu sendiri membuat pemintal pemuatan sampai siap untuk pergi, tetapi kemudian Anda kehilangan animasi transisi halaman yang indah yang Anda habiskan sepanjang waktu menyempurnakan. Untungnya, perpustakaan ini memudahkan untuk menangani kasus itu.

Jika Anda menambahkan properti statis pageTransitionDelayEnter = true untuk komponen halaman Anda, halaman Anda akan disahkan prop callback khusus yang dapat Anda gunakan untuk menunjukkan bahwa semuanya telah selesai memuat. Sementara itu, halaman Anda akan dipasang, tetapi transisi Enter belum dimulai, dan indikator pemuatan pilihan Anda akan ditampilkan di tempatnya. Saat Anda menghubungi prop callback, pemintal pemuatan akan disembunyikan, dan halaman Anda akan dianimasikan ke tempatnya! Secara default, panggilan balik dilewatkan melalui prop pageTransitionReadyToEnter , tetapi ini dapat ditentukan dengan mengatur prop loadingCallbackName pada komponen PageTransition Anda.

Catatan: Pastikan komponen Anda mengembalikan null dari fungsi render() sampai selesai memuat isinya dan siap untuk dianimasikan. Halaman Anda masih ada di pohon komponen reaksi saat memuat!

"Tapi permintaan jaringan saya biasanya cepat!", Anda akan mengatakan. "Mereka biasanya hanya mengambil beberapa ratus milidetik, dan saya tidak ingin mem -flash indikator pemuatan di layar untuk waktu yang singkat!" Perpustakaan ini juga dapat menangani kasus itu. Jika Anda menentukan prop loadingDelay , indikator pemuatan tidak akan ditampilkan sampai banyak waktu telah berlalu. Jika komponen Anda siap untuk masuk sebelumnya, indikator pemuatan tidak akan pernah ditampilkan, menjaga UX tetap bersih dan tajam. Namun, jika komponen Anda memakan waktu lama, indikator pemuatan akan ditampilkan sampai komponen Anda siap.

"Kedengarannya seperti konsep placeholder dari pembicaraan ketegangan bereaksi. Yang ada di video YouTube ini." Ya, ya itu! Itulah inspirasi untuk fitur ini.

Berikut adalah contoh komponen yang mensimulasikan permintaan jaringan dengan batas waktu:

 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 >
  }
}

Asumsikan sejenak bahwa Anda memiliki komponen Loader yang membuat indikator pemuatan pemintalan yang bagus. Anda harus memberi tahu komponen PageTransition bahwa Anda ingin menggunakan komponen ini, dan berapa lama Anda ingin menunggu sampai menunjukkan indikator jaringan:

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

Anda juga harus menambahkan gaya jika Anda ingin indikator pemuatan menjadi animasi di/mematikan layar. Jika Anda ingin muncul/menghilang tanpa animasi apa pun, Anda dapat menambahkan loadingTimeout={0} dan menghilangkan properti loadingClassNames .

Lihatlah aplikasi delayed-enter di bawah Direktori examples untuk contoh lengkap seperti apa ini. Halaman "Tentang" ( pages/about.js ) akan menunggu 2 detik sebelum menampilkan kontennya, dan sementara itu, komponen di components/Loader.js akan ditampilkan. Bermain -main dengan berbagai penundaan untuk mendapatkan rasa yang lebih dalam tentang bagaimana komponen ini bekerja.

Alat PageTransition

• classNames : Menentukan nama kelas yang akan diterapkan pada pembungkus halaman untuk menggerakkan animasi transisi halaman. Analog dengan classNames Prop dari komponen CSSTranstition react-transition-group . Namun, perhatikan bahwa hanya bentuk string dari prop itu yang didukung saat ini. Juga, perhatikan bahwa perpustakaan ini tidak memiliki keadaan "tampil" yang terpisah; Hanya kelas "enter" dan "keluar" yang diperlukan.
• tag : Menentukan tag atau komponen yang akan digunakan untuk membuat pembungkus halaman. Elemen ini akan menerima prop classNames . Ini berguna jika Anda ingin menggunakan markup semantik, misalnya jika Anda ingin membuat pembungkus halaman sebagai main , atau jika Anda perlu menyesuaikan gaya atau perilaku pembungkus halaman.
• timeout : Menentukan batas waktu untuk animasi transisi halaman. Analog dengan timeout komponen CSSTranstition react-transition-group .
• loadingComponent : elemen bereaksi yang harus ditampilkan saat
• loadingDelay : Durasi untuk menunggu sebelum menunjukkan indikator pemuatan, dalam milidetik. Jika halaman selesai memuat sebelum durasi ini telah berlalu, komponen pemuatan tidak akan pernah ditampilkan. Default ke 500ms.
• loadingCallbackName : Menentukan nama prop yang akan diterima halaman Anda untuk menelepon setelah selesai memuat. Default ke pageTransitionReadyToEnter
• loadingTimeout : Analog dengan prop timeout komponen react-transition-group CSSTranstition Jika prop ini diatur ke 0 , indikator pemuatan tidak akan dianimasikan pada/mematikan layar.
• loadingClassNames : Menentukan nama kelas yang akan diterapkan pada komponen pemuatan jika seseorang ditentukan. Analog dengan classNames Prop dari komponen CSSTranstition react-transition-group .
• monkeyPatchScrolling : Secara default, komponen Link berikutnya akan menggulir ke bagian atas halaman setiap kali diklik; Ini dapat memiliki efek gelisah yang tidak diinginkan ketika halaman sedang beralih. Jika prop ini diatur ke true ketika komponen dipasang, maka window.scrollTo akan ditembakkan monyet sehingga gulir terprogram dapat dinonaktifkan saat halaman sedang beralih. Default ke false, karena perilaku yang berpotensi samar ini harus ikut serta.
• skipInitialTransition : Menentukan apakah transisi halaman akan dihilangkan pada mount pertama. Jika Anda ingin memiliki transisi hanya antar halaman, bukan pada beban halaman pertama, atur skipInitialTransition ke true . Secara default, skipInitialTransition diatur ke false .

Berkontribusi

PRS dipersilakan! Sebelum mengerjakan dan mengirimkan PR, silakan buat masalah yang menggambarkan fitur yang ingin Anda bangun. Mungkin di luar ruang lingkup proyek ini, atau pemelihara mungkin sudah mengerjakannya.