Vue Transition与v-autocomplete过渡效果失效问题排查

你的代码存在两个核心问题导致过渡效果失效：

错误1：Transition组件被v-if直接控制 #

给<Transition>添加v-if="isActive"时，Transition组件本身会随isActive切换被销毁或重建，完全无法监听内部元素的入场/离场过渡逻辑。Vue的Transition组件必须始终挂载在DOM中，仅通过包裹内部元素的v-if/v-show来触发过渡。

错误2：Scoped样式无法穿透Vuetify组件 #

即便把v-if移到v-autocomplete上，你的scoped样式也无法作用到v-autocomplete的根DOM元素——scoped样式会自动添加专属属性选择器，仅作用于当前组件的元素，而v-autocomplete是Vuetify的子组件，其根元素不在当前组件的样式作用域内。

修复后的代码示例 #

模板部分 #

<template>
  <!-- Transition组件保持挂载，不要加v-if -->
  <Transition name="fade">
    <!-- 将v-if放在内部的v-autocomplete上 -->
    <v-autocomplete
      v-if="isActive"
      :items="[1,2,3]"
    ></v-autocomplete>
  </Transition>
  
  <!-- 测试用状态切换按钮 -->
  <v-btn @click="isActive = !isActive">切换显示</v-btn>
</template>

脚本部分 #

<script setup>
import { ref } from 'vue'
const isActive = ref(false);
</script>

样式部分（修复scoped穿透问题） #

<style scoped>
/* 使用:deep()穿透到v-autocomplete的根元素 */
:deep(.fade-enter-active),
:deep(.fade-leave-active) {
  transition: opacity 0.5s ease;
}

:deep(.fade-enter-from),
:deep(.fade-leave-to) {
  opacity: 0;
}
</style>

替代方案：使用Vuetify内置过渡 #

如果不想处理样式穿透，可直接使用Vuetify封装的v-transition组件，它已内置常见过渡效果，能和Vuetify组件完美兼容：

<template>
  <v-transition name="fade">
    <v-autocomplete
      v-if="isActive"
      :items="[1,2,3]"
    ></v-autocomplete>
  </v-transition>
  
  <v-btn @click="isActive = !isActive">切换显示</v-btn>
</template>

<script setup>
import { ref } from 'vue'
const isActive = ref(false);
</script>

<!-- 无需自定义样式，Vuetify已内置fade过渡样式 -->

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