vue 3.x 路由动态切换 页面实现动画切换的方法 动画页面切换

不少小伙伴私底下问我，vue3.x路由切换的时候，页面如何实现动画效果，今天小编直接源码分享出来。

router-view组件代码

<router-view v-slot="{ Component }">
  <transition :name="state.curRouteTransition">
    <keep-alive include="stockInventory">
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

state.curRouteTransition 动态设置class属性

代码逻辑

// 当前路由变化后设置属性
watch(
  () => router.currentRoute.value.path,
  () => {
    state.curRouteTransition = 'slide-left';
  }
);
// 当前路由变化前设置属性
const toInventoryFnc = (item: any) => {
  state.curRouteTransition = 'slide-right';
  router.push({
    name: item.name
  });
};

下面是css代码

.slide-left-enter {
  transform: translateX(15px);
  opacity: 0;
}
.slide-left-enter-active {
  transition: transform 0.3s;
  opacity: 0;
}
.slide-left-enter-to {
  transform: translateX(0);
  opacity: 0;
}
.slide-left-leave {
  transform: translateX(0);
  opacity: 0;
}
.slide-left-leave-active {
  transition: transform 0.3s;
  opacity: 0;
}
.slide-left-leave-to {
  transform: translateX(0);
  opacity: 0;
}

.slide-right-enter {
  opacity: 0;
  transform: translateX(0);
}
.slide-right-enter-active {
  transition: transform 0.3s;
}
.slide-right-enter-to {
  transform: translateX(0);
}
.slide-right-leave {
  transform: translateX(0);
}
.slide-right-leave-active {
  transition: transform 0.3s;
}
.slide-right-leave-to {
  transform: translateX(15px);
}