目次
vue-page-transitionとは
vue-page-transitionは、Vue.jsを使ってSPAなどを作成する時に便利なページ遷移用のtransitionライブラリです。
全部で18種類のアニメーションが用意されています。
【動画サイズ:62KB】
環境
Vue | 2.6.10 |
vue-page-transition | 0.2.2 |
vue-router | 3.1.6 |
インストール
以下の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ライブラリでした。
今日はこの辺でー