Vue.jsページ遷移フェード効果とvue-router

Question

vue-router定義ページ（コンポーネント）間のフェード効果ページ遷移を達成するには？ <transition name="fade"></transition>と

Answer 1

ラップ<router-view></router-view>及びこれらのスタイルを追加します。

.fade-enter-active, .fade-leave-active { 
    transition-property: opacity; 
    transition-duration: .25s; 
} 

.fade-enter-active { 
    transition-delay: .25s; 
} 

.fade-enter, .fade-leave-active { 
    opacity: 0 
} 

詳細な回答

例えば、あなたはVUE-CLIを使用してアプリケーションを作成したと仮定：

vue init webpack fadetransition 
cd fadetransition 
npm install 

のインストールルータ：

npm i vue-router 

あなたはVUE-CLIを使ってアプリを開発していない場合は、VUEルータに標準的な方法を追加することを確認してください：https://unpkg.com/vue-router/dist/vue-router.js CLIが作成した

：

<script src="/path/to/vue.js"></script> 
<script src="/path/to/vue-router.js"></script> 

あなたは例えばを使用することができますがバックボーンアプリケーションを使用して、コンポーネントを追加することができます。

1）を作成し、ページ・コンポーネントヴューで

、成分（UI要素）を入れ子にすることができます。アプリ内のページは、そのページの他のコンポーネントのルートと見なされる通常のVueコンポーネントで作成できます。

src/に移動し、pages/ディレクトリを作成します。これらのページルートコンポーネント（個々のページ）はこのディレクトリに置かれ、実際のページで使用される他のコンポーネントは既製のcomponents/ディレクトリに置くことができます。

src/pages/Page1.vueとsrc/pages/Page2.vueという名前のファイルに2つのページを作成します。その内容は、（それぞれ編集ページ番号）となります。

<template> 
    <h1>Page 1</h1> 
</template> 

<script> 
export default { 
} 
</script> 

<style scoped> 
</style> 

編集生成src/main.js追加に必要な輸入品をルーティング2）セットアップ：

import VueRouter from 'vue-router' 
import Page1 from './pages/Page1' 
import Page2 from './pages/Page2' 

グローバルルータの使用を追加します。

Vue.use(VueRouter) 

は、ルータの設定を追加します。

const router = new VueRouter({ 
    routes: [ 
    { path: '/page1', component: Page1 }, 
    { path: '/page2', component: Page2 }, 
    { path: '/', redirect: '/page1' } 
    ] 
}) 

最後のルートはちょうど/page1に初期パス/をリダイレクトします。アプリの開始を編集します。

new Vue({ 
    router, 
    el: '#app', 
    render: h => h(App) 
}) 

全体src/main.js例が答えの終わりです。ルーティングは、今では設定されている

3）は、ルータのビューを追加し、ページコンポーネントは、ルータに応じてレンダリングされるだけの場所がありません。これは<router-view></router-view>をテンプレートのどこかに置くことによって行われ、src/App.vueの<template>タグに入れたいと思うでしょう。

src/App.vueの例全体が答えの最後です。

4）例えば、<transition name="fade">要素でページコンポーネント

ラップの間<router-view></router-view>をフェードトランジション効果を追加します。

<template> 
    <div id="app"> 
    <transition name="fade"> 
     <router-view></router-view> 
    </transition> 
    </div> 
</template> 

Vueが、ここで仕事をする。それが作成し、適切なCSSを挿入しますエフェクトの持続時間を通して指定された名前で始まるクラス（例：.fade-enter-active）。 App.vueのセクションで効果を定義しましょう：

<style> 
.fade-enter-active, .fade-leave-active { 
    transition-property: opacity; 
    transition-duration: .25s; 
} 

.fade-enter-active { 
    transition-delay: .25s; 
} 

.fade-enter, .fade-leave-active { 
    opacity: 0 
} 
</style> 

これはそれです。今すぐアプリを実行するとします。 npm run devとすると、自動的にPage 1がフェードイン効果で表示されます。 URLを/ page2に書き換えると、フェードアウトとフェードインのエフェクトが付いたページが切り替わります。

詳細については、routingおよびtransitionsに関するドキュメントをご覧ください。

5）オプション：ページへのリンクを追加します。

あなたは例えば、<router-link>コンポーネントで特定のページへのリンクを追加することができます。

は

<router-link to="/page1">Page 1</router-link> 
<router-link to="/page2">Page 2</router-link> 

これは、自動的にハイパーリンクに彼らがアクティブになっている場合でrouter-link-activeクラスを提供しますが、あなたがしている場合は、カスタムクラスを指定することができます例えば、ブートストラップ：

<router-link class="nav-link" active-class="active" to="/page1">Page 1</router-link> 
<router-link class="nav-link" active-class="active" to="/page2">Page 2</router-link> 

参照

のsrc/main.jsのためのファイル：

// The Vue build version to load with the `import` command 
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. 
import Vue from 'vue' 
import VueRouter from 'vue-router' 

import App from './App' 
import Page1 from './pages/Page1' 
import Page2 from './pages/Page2' 

Vue.use(VueRouter) 

const router = new VueRouter({ 
    routes: [ 
    { path: '/page1', component: Page1 }, 
    { path: '/page2', component: Page2 }, 
    { path: '/', redirect: '/page1' } 
    ] 
}) 

/* eslint-disable no-new */ 
new Vue({ 
    router, 
    el: '#app', 
    render: h => h(App) 
}) 

のsrc/App.vue：

<template> 
    <div id="app"> 
    <router-link class="nav-link" active-class="active" to="/page1">Page 1</router-link> 
    <router-link class="nav-link" active-class="active" to="/page2">Page 2</router-link> 
    <transition name="fade"> 
     <router-view></router-view> 
    </transition> 
    </div> 
</template> 

<script> 
export default { 
    name: 'app' 
} 
</script> 

<style> 
.fade-enter-active, .fade-leave-active { 
    transition-property: opacity; 
    transition-duration: .25s; 
} 

.fade-enter-active { 
    transition-delay: .25s; 
} 

.fade-enter, .fade-leave-active { 
    opacity: 0 
} 
</style> 

のsrc /ページ/ページ1。 vue：

<template> 
    <h1>Page 1</h1> 
</template> 

<script> 
export default { 
} 
</script> 

<style scoped> 
</style> 

のsrc /ページ/ Page2.vue：徹底した

<template> 
    <h1>Page 2</h1> 
</template> 

<script> 
export default { 
} 
</script> 

<style scoped> 
</style>