Vue3 Transition组件v-show仅mouseleave生效，迁移后异常求助

问题根源 #

1. 过渡起始位置设置不合理：当前使用transform: translateX(-50rem)作为过渡起始/结束位置，该值远大于容器宽度，结合父元素overflow:hidden，元素进入时完全处于容器可视范围外，导致动画过程无法被观察到；而离开时元素从容器内移出，动画可见。
2. Transition时长配置冲突：组件上设置的duration="1000"与CSS过渡样式的0.3s不一致，可能导致动画逻辑混乱。

解决方案 #

1. 调整过渡位置为容器相对值 #

修改CSS中的过渡类，将固定的-50rem改为相对容器宽度的-100%，确保动画过程在可视范围内：

.nested-enter-from,
.nested-leave-to {
  transform: translateX(-100%); /* 替换原-50rem */
  opacity: 0;
}

2. 统一过渡时长 #

移除<Transition>组件上的duration属性，让CSS样式中的过渡时长主导，避免配置冲突：

<Transition name="nested">
  <!-- ... 内部元素 ... -->
</Transition>

备选方案：避免用display:none控制显隐（针对v-show潜在问题） #

如果上述调整后仍有问题，可替换v-show为基于opacity和pointer-events的显式控制，避免display:none导致的过渡中断：

1. 修改模板，移除v-show，改用动态类：

<Transition name="nested">
  <div :class="{ infos: true, 'infos-hidden': !hover }">
    <h2>{{ name }}</h2>
    <div class="tags">
      <p v-for="tag in tags" :key="tag">{{ tag }}</p>
    </div>
  </div>
</Transition>

2. 添加对应CSS样式：

.infos {
  z-index: 10;
  display: flex;
  flex-direction: column;
  background-color: rgba(24, 24, 24, 0.7);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* 默认处于过渡起始状态 */
  transform: translateX(-100%);
  opacity: 0;
}

.infos-hidden {
  pointer-events: none; /* 隐藏时不响应鼠标事件 */
}

.nested-enter-active,
.nested-leave-active {
  transition: 0.3s cubic-bezier(0.77, 0.2, 0.05, 1);
}

/* 仅需定义离开时的目标状态，进入时会自动过渡到元素默认样式 */
.nested-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

内容的提问来源于stack exchange，提问作者Lauriane