Vue3 Transition组件给页面切换并加上动画效果

<template>
  <div class="wrapper">
    <!-- 导航条 -->
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
    <!-- 动画区，设置flex布局 -->
    <div class="animation">
      <router-view v-slot="{ Component }">
        <transition :name="transitionName">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup>
import { RouterLink, useRouter } from 'vue-router';
import { ref } from 'vue';
let transitionName = ref();
let router = useRouter();
router.beforeEach((to, from) => {
  // 根据路由标记判断触发哪个动画
  if (to.meta.index > from.meta.index) {
  	// 从右往左动画
    transitionName.value = 'slide-right';
  } else if (to.meta.index < from.meta.index) {
   	// 从左往右动画
    transitionName.value = 'slide-left';
  } else {
    transitionName.value = '';
  }
});
</script>

// 省略部分代码
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
      meta: {
        index: 1
      }
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
      meta: {
        index: 2
      }
    }
  ]

.wrapper {
    overflow-x: hidden;
    .animation {
        display: flex;
        width: 200%;
        & > div {
            width: 50%;
        }
        .slide-left-enter-active,
        .slide-left-leave-active,
        .slide-right-enter-active,
        .slide-right-leave-active {
            transition: transform 0.3s;
        }
        .slide-right-enter-from {
            transform: translateX(0);
        }
        .slide-right-enter-to {
            transform: translateX(-100%);
        }
        .slide-right-leave-from {
            transform: translateX(0);
        }
        .slide-right-leave-to {
            transform: translateX(-100%);
        }
        .slide-left-enter-from {
            transform: translateX(-200%);
        }
        .slide-left-enter-to {
            transform: translateX(-100%);
        }
        .slide-left-leave-from {
            transform: translateX(0);
        }
        .slide-left-leave-to {
            transform: translateX(100%);
        }
    }
}

const overlayNode = document.createElement('div');
overlayNode.className = 'my-overlay';

// 添加初始显示的过渡效果
overlayNode.classList.add('my-overlay-enter-from');
overlayNode.classList.add('my-overlay-enter-active');

// 在body标签内部插入此元素
document.body.appendChild(overlayNode);

const nextClass = () => {
  overlayNode.classList.remove('my-overlay-enter-from');
  overlayNode.classList.add('my-overlay-enter-to');
};
// 元素插入完成后的下一帧触发
requestAnimationFrame(nextClass);

// 在过渡或动画完成之后移除
setTimeout(() => {
  overlayNode.classList.remove('my-overlay-enter-to');
  overlayNode.classList.remove('my-overlay-enter-active');
}, 300);

$slide-duration: 3s;
.slide-left-enter-active {
  animation: slide-left-in $slide-duration;
}
.slide-left-leave-active {
  animation: slide-left-out $slide-duration;
}
.slide-right-enter-active {
  animation: slide-right-in $slide-duration;
}
.slide-right-leave-active {
  animation: slide-right-out $slide-duration;
}
@keyframes slide-left-in {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes slide-left-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes slide-right-in {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes slide-right-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}