web-dev-qa-db-ja.com

Vue.jsページ遷移フェードエフェクトとvue-router

Vue-routerで定義されたページ（コンポーネント）間でフェード効果のページ遷移を実現する方法は？

transitionfadeeffectvue-routervue.js
40
Kaspi

<router-view></router-view>を<transition name="fade"></transition>でラップし、次のスタイルを追加します。

.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ルーターを標準的な方法で追加してください。

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

例： https://unpkg.com/vue-router/dist/vue-router.js

CLIは、コンポーネントを追加できるバックボーンアプリケーションを作成しました。

1）ページコンポーネントを作成します

Vueでは、コンポーネント（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>

2）ルーティングのセットアップ

生成されたsrc/main.jsを編集して、必要なインポートを追加します。

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）ページコンポーネント間にフェードトランジション効果を追加

<router-view></router-view>を<transition name="fade">要素でラップします。例：

<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を使用すると、ページ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/pages/Page1.vue：

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

<script>
export default {
}
</script>

<style scoped>
</style>

src/pages/Page2.vue：

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

<script>
export default {
}
</script>

<style scoped>
</style>
145
Kaspi

プラグアンドプレイソリューション

vue-page-transitionというプラグアンドプレイソリューションもあり、あらゆる種類のtransitionsを提供します。 （フェード、フリップ、ズーム、オーバーレイなど）

1-npmパッケージをインストールします：

yarn add vue-page-transition

2-プラグインを登録します：

import Vue from 'vue'
import VuePageTransition from 'vue-page-transition'

Vue.use(VuePageTransition)

3-router-viewをグローバルアニメーションでラップします：

<vue-page-transition name="fade-in-right">
  <router-view/>
</vue-page-transition>

GitHubの詳細： https://github.com/Orlandster/vue-page-transition

0
Orlandster