Vue.jsでSPA作成に便利なぺージ遷移用のtransitionライブラリ「vue-page-transition」

vue-page-transitionとは

vue-page-transitionは、Vue.jsを使ってSPAなどを作成する時に便利なページ遷移用のtransitionライブラリです。

全部で18種類のアニメーションが用意されています。

【動画サイズ：62KB】

環境

インストール

以下のnpm、yarn、UDNを使ってインストールします。

npm

npm install vue-page-transition vue-router

yarn

yarn add vue-page-transition vue-router

UMD

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-page-transition.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-page-transition.browser.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/Orlandster/vue-page-transition

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import VueRouter from 'vue-router'
import VuePageTransition from 'vue-page-transition'

（2）CDNの場合

const VuePageTransition = window['VuePageTransition'].default;

2.メソッドを設定

上記で取得したVuePageTransitionを Vue.use に取り込みます。

このライブラリにはvue-rooterの使用が必須になっています。
下記のサンプルのようにルーティングを設定します。

const router = new VueRouter({
  routes: [
  {
    path: '/',
    name: 'Vue Page Transition',
    component: {
      template: '<div>Vue Page Transition</div>' 
    },
    meta: { transition: 'fade' },
  },
  {
    path: '/fade/default',
    name: 'Default Fade - Vue Page Transition',
    component: {
      template: '<div>Default Fade - Vue Page Transition</div>' 
    },
    meta: { transition: 'fade' },
  },
  {
    path: '/zoom/default',
    name: 'Default Zoom - Vue Page Transition',
    component: {
      template: '<div>Default Zoom - Vue Page Transition</div>' 
    },
    meta: { transition: 'zoom' },
  },
  {
    path: '/flip/x',
    name: 'Flip X - Vue Page Transition',
    component: {
      template: '<div>Flip X - Vue Page Transition</div>' 
    },
    meta: { transition: 'flip-x' },
  },
  {
    path: '/overlay/up',
    name: 'Overlay Up - Vue Page Transition',
    component: {
      template: '<div>Overlay Up - Vue Page Transition</div>' 
    },
    meta: { transition: 'overlay-up' },
  }, 
  ]
});

Vue.use(VuePageTransition);

new Vue({
  el: '#app',
  router
});
 

3. テンプレートを準備

<vue-page-transition> を設置します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <div class="container">
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/fade/default">Fade</router-link></li>
      <li><router-link to="/zoom/default">Zoom</router-link></li>
      <li><router-link to="/flip/x">Flip</router-link></li>
      <li><router-link to="/overlay/up">Overlay</router-link></li>
    </ul>
    <main>
      <vue-page-transition >
        <router-view></router-view>
      </vue-page-transition>
    </main>
  </div>  
</div>

サンプル

>>専用ページで確認する

さいごに

Vue.jsを使ってSPAなどを作成する時に便利なページ遷移用のtransitionライブラリでした。

今日はこの辺でー