vue实现页面间的跳转动画

最新推荐文章于 2024-04-09 01:43:58 发布

原创最新推荐文章于 2024-04-09 01:43:58 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #路由跳转动画

javascript 同时被 3 个专栏收录

20 篇文章

订阅专栏

css3

5 篇文章

订阅专栏

vue-js

4 篇文章

订阅专栏

本文介绍在Vue项目中实现页面切换动画的两种方法：通过引入vue-navigation库监听路由变化，及在路由对象上添加自定义变量并重写router.go()方法。文章详细解释了如何根据不同场景选择合适的动画，并通过CSS实现平滑过渡。

1、监听路由变化

2种方式监听页面切换

// 方式1（引入第三方库vue-navigation）
this.$navigation.on('forward', (to, from) => {
  // 动画类
  this.transitionName = 'slide-left'
})
this.$navigation.on('back', (to, from) => {
  this.transitionName = 'slide-right'
})

// 方式2（路由对象route上加入自定义变量，重写router.go()方法）
// 1.增强原方法，好处是旧的业务模块不需要任何变动
const goBack = Router.prototype.go
Router.prototype.go = function () {
  this.isBack = true
  goBack.apply(this, arguments)
}
2.监听路由变化
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()
}

2、添加动画

// html
<transition :name="transitionName">
  // 使用方式1监听路由切换时，需要加上该组件
  <navigation>
    <router-view class="page" />
  </navigation>
</transition>

// css
.page {
  transition: all .5s cubic-bezier(.55, 0, .1, 1);
}
.slide-left-enter, .slide-right-leave-active {
  // 注意：必须使用absolute定位，否则切换动画时，为空白页面切换
  position: absolute;
  width: 100vw;
  opacity: 0;
  transform: translate(100%, 0);
}
.slide-left-leave-active, .slide-right-enter {
  position: absolute;
  width: 100vw;
  opacity: 0;
  transform: translate(-100%, 0);
}