vue结合keepAlive使用转场动画

最新推荐文章于 2023-06-30 15:22:07 发布

DJ老邓

最新推荐文章于 2023-06-30 15:22:07 发布

阅读量297

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_45819748/article/details/114300575

本文介绍如何在Vue项目中利用keep-alive组件和transition实现页面间的过渡动画，并通过监听路由变化来动态调整动画方向。此外，还展示了如何通过路由元信息决定组件是否被缓存。

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

由于keepAlive和transition都是vue自身组件不需要安装，直接使用：

<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive>
        <router-view class="child-view" v-if="$route.meta.keepAlive" />
      </keep-alive>
    </transition>
    <transition :name="transitionName">
      <router-view class="child-view" v-if="!$route.meta.keepAlive" />
    </transition>
  </div>
</template>

$route.meta.keepAlive是判断组件路由元（即meta）中加入keepAlive的布尔值；

默认slide-left

<script>
export default {
  data() {
    return {
      transitionName: "slide-left"
    };
  },
  watch: {
    $route(to, from) {
      const toDepth = to.path.split("/").length;
      // console.log(to.path.split("/"));
      // console.log(toDepth);
      const fromDepth = from.path.split("/").length;
      // console.log(fromDepth);
      this.transitionName = toDepth > fromDepth ? "slide-right" : "slide-left";
      // 滚动条事件处理，切换页面会保留离开页面的滚动条位置，需要清0
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      document.pageYOffset = 0;
      // if(to.meta.index){
      //   if(to.meta.index < from.meta.index){
      //     this.transitionName = "slide-right"
      //   }else {
      //     this.transitionName = "slide-left"
      //   }
      // }
    }
  }
};
</script>

上面通过监听路由的长度来实现转场动画（注释部分通过组件路由元里面定义的index值来实现，效果一样）

设置动画样式实现的css文件

<style lang="scss">
html,
body,
#app {
  width: 100%;
  height: 100%;
}
.child-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(-80px, 0);
  transform: translate(-80px, 0);
}
.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
</style>

下面就是router/index.js内容

  // 首页
  {
    path: "/",
    name: "Home",
    component: () => import("../views/Index.vue"),
    meta: {
      keepAlive: true,
      index: 1 //判断index来决定页面的层级
    }
  },
  // 详情
  {
    path: "/detail",
    name: "Detail",
    component: () => import("../components/Hot/Detail.vue"),
    meta: {
      keepAlive: false,
      index: 2 //判断index来决定页面的层级
    }
  },
    // 城市搜索
  {
    path: "/city",
    name: "City",
    component: () => import("../components/Header/City.vue"),
    meta: {
      index: 3 //判断index来决定页面的层级
    }
  }