Vue.js 页面过渡淡入淡出效果与 vue-router
Posted
技术标签:
【中文标题】Vue.js 页面过渡淡入淡出效果与 vue-router【英文标题】:Vue.js page transition fade effect with vue-router 【发布时间】:2017-05-04 10:00:13 【问题描述】:vue-router定义的页面(组件)之间如何实现渐变效果页面过渡?
【问题讨论】:
我发现以下链接对在我的项目中进行设置非常有帮助:markus.oberlehner.net/blog/vue-router-page-transitions 【参考方案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 已为您创建了一个主干应用程序,您可以在其中添加组件。
1) 创建页面组件
在 Vue 中,组件(UI 元素)可以嵌套。您的应用程序中的页面可以使用常规 Vue 组件创建,该组件被视为该页面中其他组件的根。
转到src/
并创建pages/
目录。这些页面根组件(单个页面)会放在这个目录下,而实际页面中用到的其他组件可以放在现成的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 类,并在整个效果的持续时间内以指定的名称开头,例如:.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>
【讨论】:
该死的太彻底了,谢谢你的淡入淡出课程! 如果允许的话,我会 +1 两次。谢谢! 有没有办法指定每个页面使用哪种过渡?例如,我试图根据用户导航到/从哪个页面向上/向下移动页面。 @SoichiHayashi 这种方法可以帮助***.com/questions/38776733/… @SoichiHayashi 也来看看router.vuejs.org/en/advanced/…【参考方案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的主要内容,如果未能解决你的问题,请参考以下文章