Vue.js vue-router 的页面过渡淡入淡出效果

Question

如何在vue-router定义的页面（组件）之间实现淡入淡出效果的页面过渡？

Answer 1

用 <transition name="fade"></transition> 包装 <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 路由器：

<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 已经为您创建了一个 backbone 应用程序，您可以向其中添加组件。

1) 创建页面组件

在 Vue 中，组件（UI 个元素）可以嵌套。应用程序中的页面可以使用常规 Vue 组件制作，该组件被视为该页面中其他组件的根。

转到 src/ 并创建 pages/ 目录。这些page-root组件（个别页面）会放在这个目录下，而实际页面中使用的其他组件可以放在现成的components/目录下。

为初学者在名为 src/pages/Page1.vue 和 src/pages/Page2.vue 的文件中创建两个页面。它们的内容将是（分别编辑页码）：

<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) 添加页面组件之间淡入淡出过渡效果

用 <transition name="fade"> 元素包裹 <router-view></router-view>，例如：

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

Vue 将在这里完成工作：它将创建并插入适当的 CSS classes，从指定的名称开始，贯穿效果的持续时间，例如：.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 and transitions 上的文档了解更多信息。

5) 可选：添加页面链接。

您可以使用 <router-link> 组件添加指向特定页面的链接，例如：

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

这会自动为链接提供 router-link-active class 以防它们处于活动状态，但您也可以指定自定义 classes 如果您正在使用例如Bootstrap:

<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>

Answer 2

即插即用解决方案

还有一个名为 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

Vue.js vue-router 的页面过渡淡入淡出效果

Vue.js page transition fade effect with vue-router

transition

fade

effect

vue.js

vue-router

即插即用解决方案