vue3页面切换过渡动画一键设置

在Vue3中，你可以使用`<transition>`组件来实现页面切换过渡动画。要一键设置所有页面切换过渡动画，你可以在你的主组件中使用如下代码：

<template>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

上面的代码中，我们将`<transition>`组件包裹了`<router-view>`组件，设置了过渡的名称为`fade`，模式为`out-in`。然后在样式中，我们使用了CSS过渡动画来实现淡入淡出效果。你可以根据自己的需要修改过渡的名称和样式。