带有vue-router的Vue.js页面过渡淡入淡出效果 [英] Vue.js page transition fade effect with vue-router

问题描述

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

How to achieve a fade effect page transition between vue-router defined pages (components)?

推荐答案

用<transition name="fade"></transition>包裹<router-view></router-view>并添加以下样式:

Wrap <router-view></router-view> with <transition name="fade"></transition> and add these styles:

.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创建了应用程序，例如:

Assuming you have created your application with vue-cli, e.g.:

vue init webpack fadetransition
cd fadetransition
npm install

安装路由器:

npm i vue-router

如果您不使用vue-cli开发应用，请确保以标准方式添加vue路由器:

If you are not developing your app using vue-cli, make sure to add the vue router the standard way:

<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为您创建了一个主干应用程序，您可以在其中添加组件.

The CLI has created a backbone application for you, which you can add components to.

1)创建页面组件

在Vue中，组件(UI元素)可以嵌套.可以使用常规Vue组件创建应用程序中的页面，该组件被视为该页面中其他组件的根.

In Vue, components (UI elements) can be nested. A page in your app can be made with a regular Vue component that is considered as the root to other components in that page.

转到src/并创建pages/目录.这些页面根组件(单个页面)将放置在此目录中，而实际页面中使用的其他组件可以放置在现成的components/目录中.

Go to src/ and create pages/ directory. These page-root components (individual pages) will be put in this directory, while the other components used in the actual pages can be put to the ready-made components/ directory.

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

Create two pages in files called src/pages/Page1.vue and src/pages/Page2.vue for starters. Their content will be (edit page numbers respectively):

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

<script>
export default {
}
</script>

<style scoped>
</style>

2)设置路由

编辑生成的src/main.js添加所需的导入:

Edit the generated src/main.js add the required imports:

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

添加全局路由器使用情况:

Add a global router usage:

Vue.use(VueRouter)

添加路由器设置:

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

最后一条路由只是将初始路径/重定向到/page1.编辑应用程序启动:

The last route just redirects the initial path / to /page1. Edit the app initiation:

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

整个src/main.js示例在答案的结尾.

The whole src/main.js example is at the end of the answer.

3)添加路由器视图

到现在为止，路由已建立，只是缺少根据路由器呈现页面组件的位置.这是通过将<router-view></router-view>放置在模板中的某个位置来完成的，您将需要将其放置在src/App.vue的<template>标记中.

Routing is set up by now, just a place where the page components will be rendered according to the router is missing. This is done by placing <router-view></router-view> somewhere in the templates, you will want to put it in the src/App.vue's <template> tag.

整个src/App.vue示例在答案的结尾.

The whole src/App.vue example is at the end of the answer.

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的部分中定义效果:

Vue will do the job here: it will create and insert appropriate CSS classes starting with the name specified through-out the effect's duration, e.g.: .fade-enter-active. Now define the effects in App.vue's section:

<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，它将切换具有淡入和淡入效果的页面.

That's it. If you run the app now, e.g. with npm run dev, it will automatically display Page 1 with a fade-in effect. If you rewrite the URL to /page2, it will switch the pages with fade-out and fade-in effects.

在路由和 5)可选:添加页面链接.

您可以使用<router-link>组件将链接添加到特定页面，例如:

You can add links to particular pages with the <router-link> component, e.g.:

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

如果链接处于活动状态，这会自动为链接提供router-link-active类，但是如果您使用的是例如，也可以指定自定义类.引导程序:

This automatically gives the links a router-link-active class in case they are active, but you can also specify custom classes if you are using e.g. 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:

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:

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:

src/pages/Page1.vue:

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

<script>
export default {
}
</script>

<style scoped>
</style>

src/pages/Page2.vue:

src/pages/Page2.vue:

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

<script>
export default {
}
</script>

<style scoped>
</style>

这篇关于带有vue-router的Vue.js页面过渡淡入淡出效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！