Transition Vue.js页面过渡淡入效果与Vue路由器
如何在vue路由器定义的页面(组件)之间实现淡入淡出效果页面转换?使用Transition Vue.js页面过渡淡入效果与Vue路由器,transition,fade,effect,vue-router,vue.js,Transition,Fade,Effect,Vue Router,Vue.js,如何在vue路由器定义的页面(组件)之间实现淡入淡出效果页面转换?使用包装,并添加以下样式: .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 }
包装
,并添加以下样式:
.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>
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)添加路由器视图
路由现在已经设置好了,只是缺少一个根据路由器呈现页面组件的地方。这是通过将
放在模板中的某个位置来完成的,您需要将其放在src/App.vue
的
标记中
整个src/App.vue
示例位于答案的末尾
4)在页面组件之间添加淡入淡出过渡效果
用
元素包装
,例如:
<template>
<div id="app">
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</template>
<router-link to="/page1">Page 1</router-link>
<router-link to="/page2">Page 2</router-link>
就这样。如果您现在运行应用程序,例如使用npm run dev
,它将自动显示具有淡入效果的第1页。如果将URL重写为/page2,它将切换具有淡出和淡入效果的页面
有关更多信息,请参阅和的文档
5)可选:添加页面链接。
您可以使用
组件添加指向特定页面的链接,例如:
<template>
<div id="app">
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</template>
<router-link to="/page1">Page 1</router-link>
<router-link 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>
第1页
第2页
导出默认值{
名称:“应用程序”
}
。淡入激活状态。淡入保持激活状态{
过渡特性:不透明度;
过渡持续时间:.25s;
}
。淡入激活状态{
转换延迟:.25s;
}
.fade进入,.fade离开活动状态{
不透明度:0
}
src/pages/Page1.vue:
<template>
<h1>Page 1</h1>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
第1页
导出默认值{
}
src/pages/Page2.vue:
<template>
<h1>Page 2</h1>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
第2页
导出默认值{
}
即插即用解决方案
还有一种即插即用解决方案,名为vue页面转换
,它为您提供各种转换
。(淡入淡出、翻转、缩放、叠加等)
1-安装npm软件包:
纱线添加vue页面转换
2-注册插件:
从“Vue”导入Vue
从“vue页面转换”导入VuePagetTransition
Vue.use(VuePagetTransition)
3-用全局动画包装您的路由器视图
:
了解有关GitHub的更多信息:
该死的,那太彻底了,谢谢你的淡出课程!如果它允许我,我会有两次+1。谢谢有没有办法指定每个页面使用哪个转换?例如,我试图根据用户导航到/从哪个页面上下移动页面。@SoichiHayashi此方法也可以帮助@SoichiHayashi查看此处。我发现以下链接对在我的项目中设置此设置非常有用:
<template>
<h1>Page 2</h1>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>