码迷,mamicode.com
首页 > 其他好文 > 详细

router 返回上一页+动画效果

时间:2017-11-04 11:26:03      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:from   goback   动画效果   否则   abs   type   变化   oba   router   

Router.prototype.goBack = function () {
  this.isBack = true
  this.go(-1)
}

监听路由变化

beforeRouteUpdate (to, from, next) {
  // 如果isBack为true时,证明是用户点击了回退,执行slide-right动画
   let isBack = this.$router.isBack
   if (isBack) {
      this.transitionName = ‘slide-right‘
   } else {
      this.transitionName = ‘slide-left‘
   }
   // 做完回退动画后,要设置成前进动画,否则下次打开页面动画将还是回退
   this.$router.isBack = false
     next()
}

动画效果

<transition :name="transitionName">
    <router-view class="content"></router-view> </transition>
.content {
  position: absolute;
  width:100%;
  transition: all .8s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  transform: translate(-50px, 0);
}

 

router 返回上一页+动画效果

标签:from   goback   动画效果   否则   abs   type   变化   oba   router   

原文地址:http://www.cnblogs.com/vhen/p/7782108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!