Vue移动端页面切换动画效果

最新推荐文章于 2024-09-17 18:00:54 发布

深山踏红叶²

最新推荐文章于 2024-09-17 18:00:54 发布

阅读量1.6k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_48566243/article/details/114293767

版权

//App中

<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>

//router中定义index

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)
import route from './route'

const routes = [
  {
    path: '/',
    name: 'login',
    component: () => import('@/views/login'),
    meta:{
      index:1
    }
  },
  {
    path: '/detail',
    name: 'detail',
    component: () => import('@/views/login/detail'),
    meta:{
      index:2
    }
  },
  {
    path: '/city',
    name: 'city',
    component: () => import('@/views/login/city'),
    meta:{
      index:1
    }
  },
  ...route
]

const router = new VueRouter({
  routes
})

export default router