Vue-admin工作整理(七):路由的切换动效
- 思路就是通过 transition-group 这个组件来对多组件进行控制,效果是通过样式来写,transition-group要有指定的key值,样式中通过name来命名类的名字
<template> <div id="app"> <div id="nav"> <router-link :to="{ name: 'home' }">Home</router-link> | <router-link :to="{ name: 'about' }">About</router-link> </div> <transition-group name= 'router'> <router-view key="default"/> <router-view key="email" name="email"/> <router-view key="tel" name="tel"/> </transition-group> </div> </template> <style lang="less"> .router-enter { //页面进入时:即将要加载的时候,透明度是0 opacity: 0; } .router-enter-active { //页面进入时:组件从没有到有的动态效果 transition: opacity 1s ease; } .router-enter-to { //页面进入时:页面完全显示之后的状态 opacity: 1; } .router-leave { //页面离开时:即将要加载的时候,透明度是0 opacity: 1; } .router-leave-active { //页面离开时:组件从没有到有的动态效果 transition: opacity 1s ease; } .router-leave-to { //页面离开时:页面完全显示之后的状态 opacity: 0; } #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } } } </style>
- 继续深入一下效果的实现:就是路由中存在某个参数效果再去呈现,实现思路:增加watch监听,来查看当前实例的路由参数数据,如果存在指定的URL路由参数,那么就执行特效
<template> <div id="app"> <div id="nav"> <router-link :to="{ name: 'home' }">Home</router-link> | <router-link :to="{ name: 'about' }">About</router-link> </div> <transition-group :name= 'routerTransition'> <router-view key="default"/> <router-view key="email" name="email"/> <router-view key="tel" name="tel"/> </transition-group> </div> </template> <script> export default { data () { return { routerTransition: '' } }, watch: { // 当前实例中存在routerTransitionName特效才会生效 '$route' (to) { to.query && to.query.routerTransitionName && (this.routerTransition = to.query.routerTransitionName) } } } </script> <style lang="less"> .router-enter { //页面进入时:即将要加载的时候,透明度是0 opacity: 0; } .router-enter-active { //页面进入时:组件从没有到有的动态效果 transition: opacity 1s ease; } .router-enter-to { //页面进入时:页面完全显示之后的状态 opacity: 1; } .router-leave { //页面离开时:即将要加载的时候,透明度是0 opacity: 1; } .router-leave-active { //页面离开时:组件从没有到有的动态效果 transition: opacity 1s ease; } .router-leave-to { //页面离开时:页面完全显示之后的状态 opacity: 0; } #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } } } </style>