如何在Vue中实现多种不同的transition过渡动画？

你当前的问题是transition的name固定为"show"，导致show2的样式永远不会被触发。要实现类似目标网站的双向切换动画，需要根据路由切换的方向（前进/后退）动态切换transition的名称。

步骤1：动态绑定Transition的名称 #

将模板中的固定name="show"改为动态绑定，根据路由切换方向切换show和show2：

<template>
  <div>
    <transition :name="transitionName">
      <router-view />
    </transition>
  </div>
</template>

步骤2：添加路由方向判断逻辑 #

根据Vue版本选择对应的代码实现，核心是监听路由变化，判断切换方向并更新transitionName：

Vue3（