Vue用户进行页面切换(路由跳转)时，动态改变路由的动画(transition效果) |
您所在的位置：网站首页 › vue路由跳转动画 › Vue用户进行页面切换(路由跳转)时，动态改变路由的动画(transition效果) |
Vue用户进行页面切换(路由跳转)时，动态改变路由的动画(transition效果)
|
当我们在使用Vue-Router时，为了用户有更好的视觉效果及体验，我们通常需要实现基于路由的动态过渡效果
不了解组件效果的同学可以先看一下的功能介绍：https://cn.vuejs.org/v2/guide/transitions.html 过渡效果需要导入animate.css,可到https://daneden.github.io/animate.css/下载 如果我们只需要单纯的给定一个过渡效果时，只需要给name属性赋一个固定的值即可 或 利用enter-active-class、leave-active-class export default { name: 'app', data () { return { msg: '' } }, } #app{ height: 100%; width:100%; } .animated{ animation-duration: 0.4s; } #app div{ position:absolute; } 但大多数时候我们都是需要动态改变过渡效果,这里我介绍两种实现方式，经测试都是可用的。 第一种: watch $route 决定使用哪种过渡 export default { data () { return { transitionName: 'slide-left', pathList:[] } }, watch:{ '$route'(to,from){ console.log(from.path) if(this.pathList.includes(to.path)) { const index = (this.pathList.findIndex(()=>{ return from.path })) this.pathList.splice(index,1) console.log(index) this.$router.isBack=true; } else { this.pathList.push(to.path) this.$router.isBack=false; } if(to.path==='/start') // 'start'为首页 { this.$router.isBack=true; this.pathList = [] } let isBack = this.$router.isBack console.log(isBack) console.log(this.pathList) if (isBack) { this.transitionName = 'slide-left' } else { this.transitionName = 'slide-right' } this.$router.isBack = false } } } .slide-left-enter-active { transition: all .3s ease; } .slide-left-leave-active { transition: all .8s ease ; } .slide-left-enter, /* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateX(100%); opacity: 0; } .slide-left-leave-to{ transform: translateX(-100%); opacity: 0; } .slide-right-enter-active { transition: all .3s ease; } .slide-right-leave-active { transition: all .8s ease ; } .slide-right-enter, /* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateX(-100%); opacity: 0; } .slide-right-leave-to{ transform: translateX(100%); opacity: 0; } 第二种: 通过vue-router的钩子函数进行监听,请不要忽略next export default { data () { return { transitionName: 'slide-left' } }, beforeRouteUpdate (to, from, next) { console.log(to,from) if(this.$route.path!='/home') //假设name为home的路由都使用`slide-left`,其它的路由都为`slider-right` { this.$router.isBack=true; } let isBack = this.$router.isBack if (isBack) { this.transitionName = 'slide-right' } else { this.transitionName = 'slide-left' } this.$router.isBack = false next() } } .slide-left-enter-active { transition: all .3s ease; } .slide-left-leave-active { transition: all .8s ease ; } .slide-left-enter, /* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateX(100%); opacity: 0; } .slide-left-leave-to{ transform: translateX(-100%); opacity: 0; } .slide-right-enter-active { transition: all .3s ease; } .slide-right-leave-active { transition: all .8s ease ; } .slide-right-enter, /* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateX(-100%); opacity: 0; } .slide-right-leave-to{ transform: translateX(100%); opacity: 0; } 如果觉得我的文章对你有帮助,欢迎关注我的blog 相关知识点【Javascript】深入理解async/await的实现,Generator+Promise = Async/Await 【Javascript】深入理解this作用域问题以及new运算符对this作用域的影响 【Javascript】手写运算符new创建实例并实现js继承 |
【本文地址】
今日新闻 |
推荐新闻 |