vue 路由切换动画（滑入，滑出效果）

最近做的一个小项目，需要做路由切换，页面滑入滑出的效果，总结下实现的思路和方法。

router-view

用 transition 标签包裹 router-view 组件，动态添加动画名，data 里定义transitionName变量。

<transition :name="transitionName">
  <router-view></router-view>
</transition>

css样式：

.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-left-enter {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

    .slide-left-leave-active {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }

watch监听路由的变化

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";
      }
    },
  },

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

const Help = () => import("./Help.vue");
export default {
  path: "/help",
  name: "help",
  component: Help,
  meta: {
    index: 8,
  },
};
const StaffCard = () => import("./StaffCard.vue");
export default {
  path: "/staff-card",
  name: "staff-card",
  component: StaffCard,
  meta: {
    index: 9,
  },
};

以上，就可以实现页面路由切换的动画效果了。思路就是css写出动画效果，监听路由的变化，如果to索引大于from索引,使用前进的动画,反之使用后退的动画。

1人点赞

学习笔记