vue的路由跳转动画切换

农夫三拳有点疼=-=

已于 2022-03-17 11:57:29 修改

阅读量5.5k

点赞数 2

文章标签： vue.js 动画 javascript

于 2022-03-17 11:20:47 首次发布

本文链接：https://blog.csdn.net/m0_64207574/article/details/123544951

版权

本文介绍了如何使用Vue Router结合transition组件，根据路由元数据(index)设置动态动画，如左右滑动，通过watch监听路由变化判断动画方向。同时，详细展示了如何在router中配置meta对象来控制页面切换的视觉呈现。

摘要由CSDN通过智能技术生成

1，使用transition方式给跟路由渲染位置设置全局动画，

2，给router的路径设置号meta的index层级，

3，给跟路由动画设置动画切换效果和逻辑交互判断；

如下代码：

根实例中设置动画（app的渲染位置），和判断交互层级

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

export default ({
  watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      console.log(to, "to");
      console.log(from, "from");
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    },
  },
})
</script>

<style lang="less">
.slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active {
      will-change: transform;
      transition: all 500ms;
      position: absolute;
    }
    // 右滑初始装状态
    .slide-right-enter {
      // opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    
// 右滑执行状态
    .slide-right-leave-active {
      // opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    // 右滑最终状态
    .slide-right-enter-to{
      // opacity: 1;
      transform: translate3d(0, 0, 0);
    }
// 左滑初始装状态
    .slide-left-enter {
      // opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
// 左滑执行状态
    .slide-left-leave-active {
      // opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
     // 左滑最终状态
    .slide-right-enter-to{
      // opacity: 1;
      transform: translate3d(0, 0, 0);
    }
</style>

在router当中设置meta的index值，用于判断切换动画样式;

页面进出效果meta对象里index索引的定义

import Home from '../views/Home';
import First from '../views/First';

import Second from '../views/Second';


Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: {
      index: 0,
    },
  },{
    path: "/Home",
    name: "Home",
    component: Home,
    meta: {
      index: 0,
    },
  },{
    path: "/First",
    name: "First",
    component: First,
    meta: {
      index: 1,
    },
  },{
    path: "/Second",
    name: "Second",
    component: Second,
    meta: {
      index: 2,
    },
  }

];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

思路就是css写出动画效果，跟组件监听路由的变化，如果to索引大于from索引,使用前进的动画,反之使用后退的动画。