vue3中transition实现组件转场动画

app.vue里

<router-view v-slot="{ Component }">
  <transition
    name="homeapp"
    mode="out-in"
  >
    <keep-alive>
      <component
        class="view"
        :is="Component"
      />
    </keep-alive>
  </transition>
</router-view>

css代码

<style lang="scss" scoped>
.homeapp-enter-active {
  animation: moveIn 0.15s;
}
.homeapp-leave-active {
  animation: moveOut 0.15s;
}

@keyframes moveIn {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes moveOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-200px);
  }
}
</style》