vue3组件切换动画

Vue 3提供了一种简单且灵活的方式来实现组件切换动画。你可以使用`<transition>`组件和各种过渡类名来实现动画效果。下面是一个简单的示例：

首先，你需要在Vue模板中使用`<transition>`组件包裹需要进行切换动画的组件：

<transition name="fade">
  <component :is="currentComponent"></component>
</transition>

接下来，你可以在样式中定义不同的过渡类名：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

在上面的代码中，我们定义了`.fade-enter-active`和`.fade-leave-active`类，用于指定过渡效果的持续时间和属性。同时，我们还定义了`.fade-enter`和`.fade-leave-to`类，用于指定进入和离开过渡的初始状态和最终状态。

最后，在Vue实例中，你可以通过改变`currentComponent`的值来切换组件，并触发过渡动画：

data() {
  return {
    currentComponent: 'ComponentA'
  };
},
methods: {
  switchComponent() {
    this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
  }
}

通过调用`switchComponent`方法，你可以在两个组件之间进行切换，并触发过渡动画。

这只是一个简单示例，你可以根据自己的需求来定义更复杂的过渡效果和样式。请查阅Vue 3的官方文档以获取更多详细信息：https://v3.vuejs.org/guide/transitions-overview.html