vue2移动端页面跳转过渡动画_前端vue2页面跳转动画-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48171199/article/details/114287293

本文介绍了一个基于Vue.js的项目中如何实现页面切换时的过渡动画效果。通过监听路由变化并根据不同场景设置不同的CSS动画，实现了平滑且直观的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// In  app.vue

<template>
  <div id="app" class="Router">

 <transition :name="transitionName">
			<router-view></router-view>
		</transition>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      transitionName:''
    }
  },
  watch: {//使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if(to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    }
  }
}
</script>
<style lang="scss">
#app{
  width: 100%;
  height: 100%;
}
.Router{
position: relative;
}
.Router>*{
position: absolute;
width: 100%;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
 will-change: transform;
 transition: all 1500ms;
 position: absolute;
}
.slide-right-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
</style>

//main.js

export default([
  {
    path:'/hh/index',
    name:'index',
    component:() => import('@/views/hh/index'),
    meta:{index:1}
  },
  {
    path:'/test/test',
    name:'test',
    component:() => import('@/views/test/test')
  },
  {
    path:'/hh/login',
    name:'login',
    component:() => import('@/views/hh/login')
  },
  {
    path:'/hh/detail',
    name:'detail',
    component:() => import('@/views/hh/detail'),
    meta:{index:3}
  },
  {
    path:'/hh/map',
    name:'map',
    component:() => import('@/views/hh/map'),
    meta:{index:3}
  }

])