NEXT.JS & Page Transitions

2018 iT 邦幫忙鐵人賽

DAY 16

Modern Web

Next.js + 各種套件組合系列第 16 篇

2018鐵人賽

polo

團隊線上讀書會

2017-12-19 00:03:52

3345 瀏覽

分享至

介紹

在Next.js中，在Route轉換的時候希望有過場效果，這次來介紹兩個 Page Transitions的寫法，因為在Next.js中如果更換 Router是直接把元件拔掉在重新裝上所以寫法上可以利用下面兩個方法來達到換頁時的效果

第一種
原本的Dom複製後在 Append到下一個 router 畫面節點之前，可以看到使用了Router的onRouteChangeStart Event Method 把目前 const $clone = $container.cloneNode(true) container 結點複製一份，在增加一個 loading的 class 動畫效果，使用 raf這個lib 是因為有些瀏覽器還不支援某些動畫的API 是一個 polyfill 補丁，動畫API 可以參考

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Router.onRouteChangeStart = () => {
  const $container = document.getElementById('container')
  const $clone = $container.cloneNode(true)

  document.body.classList.add('loading')
  $clone.classList.add('clone')

  //把換頁前的DOM放在要換頁的前面然後往左邊移動就好像換頁效果
  raf(() => {
    $container.parentNode.insertBefore($clone, $container.nextSibling)
    $clone.classList.add('animate-out')
    $container.classList.add('animate-in')
  })
  
  //動畫結束後 就移除動畫與 $clone的部分
  $clone.addEventListener('animationend', () => {
    document.body.classList.remove('loading')
    $container.classList.remove('animate-in')
    $clone.parentNode.removeChild($clone)
  }, { once: true })
}

在 _document 也在加入 static css 動畫細節可以參考這隻css 這邊也可以使用Next.js提供的 Head

import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document'

// ---------------------------------------------

export default class CustomDocument extends Document {
  render () {
    return (<html lang='en-US'>
      <Head>
        <meta name='viewport' content='width=device-width, initial-scale=1' />
        <meta name='robots' content='noindex' />
        <link rel='stylesheet' href='/static/style.css' />
      </Head>

      <body>
        <Main />
        <NextScript />
      </body>
    </html>)
  }
}

https://github.com/zeit/next.js/tree/canary/examples/page-transitions

另外一種過場效果寫法

跟上面一種的寫法差不多比較容易，也是使用 Router.onRouteChangeStart Event觸發在配合
Router.onRouteChangeComplete或 Router.onRouteChangeError 結束動畫


Router.onRouteChangeStart = (url) => {
  console.log(`Loading: ${url}`)
  NProgress.start()
}
Router.onRouteChangeComplete = () => NProgress.done()
Router.onRouteChangeError = () => NProgress.done()

動畫部分可以參考這裡

第二種比較簡單使用Router提供的三個 onRouteChangeStart，onRouteChangeComplete，onRouteChangeError去判斷過場

範例位置
https://github.com/zeit/next.js/tree/master/examples/with-loading

總結

在Next.js要了解 Router 轉場時可以使用的Event Method ，最主要的就是以 Router.onRouteChangeStart 為觸發事件,另外如果有Css 可以透過 _document.js先把會使用到的 css放入或是使用Next.js 提供的 Head 方法把css 放到 Head 提供動畫使用