欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

VUE路由转场特效,WebAPP的前进与后退

程序员文章站 2022-05-14 09:46:25
一、效果图 二、思路 1. 定义两个 CSS 过度动画,前进与后退: slide-right-enter 和 slide-left-enter 2. 给路由配置meta信息,设置各个路由的级别: index 3. 监控路由跳转,比对 meta 信息级别,如果从大跳转到小说明是返回,从小跳转到大则是前 ......

一、效果图

 VUE路由转场特效,WebAPP的前进与后退

 

二、思路

 1. 定义两个 css 过度动画,前进与后退: slide-right-enter   和   slide-left-enter

 2. 给路由配置meta信息,设置各个路由的级别: index

 3. 监控路由跳转,比对 meta 信息级别,如果从大跳转到小说明是返回,从小跳转到大则是前进

 

三、具体代码

app.vue

<template>
  <div id="app">
    <transition :name="transitionname">
      <router-view/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      transitionname: ''
    }
  },
  watch: {
    $route (to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionname = 'slide-left'
      } else {
        this.transitionname = 'slide-right'
      }
    }
  }
}
</script>

<style lang="scss">
#app {
  color: #2c3e50;
}

//转场动画
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  // 启用硬件加速
  will-change: transform;
  transition: all 300ms;
  position: fixed;
}
.slide-right-enter {
  transform: translate(-100%, 0);
  transition-timing-function: ease-in;
}
.slide-left-enter {
  transform: translate(100%, 0);
  transition-timing-function: ease-in;
}
</style>

 

 router.js

import vue from 'vue'
import router from 'vue-router'
import home from './views/home.vue'

vue.use(router)

export default new router({
  // mode: 'history',
  base: process.env.base_url,
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
      meta: { index: 1 }
    },
    {
      path: '/publish',
      name: 'publish',
      component: () => import('./views/publish.vue'),
      meta: { index: 2 }
    },
    {
      path: '/personal',
      name: 'personal',
      component: () => import('./views/personal.vue'),
      meta: { index: 2 }
    }
  ]
})