Vue Transition not working with v-autocomplete

Issue

I'm trying to conditionally show or hide a selection text field using Vue's Transition. Still, the text field pops up and leaves without any transition.

<template>
  <Transition
    v-if="isActive"
    name="fade"
  >
    <v-autocomplete
      :items="[1,2,3]"
    ></v-autocomplete>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const isActive = ref(false); // This will be toggled in a different location of the code
</script>


<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

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

I have tried different things, such as putting the v-if on the v-autocomplete component instead of the Transition, but I cant get it running. Here is an example on Vuetify Playground

What am I doing wrong? If this is not possible with Transition, how can I achieve the same result anyway?

Solution

You should add the v-if to the first child of it, not to the Transition.

<Transition name="fade">
  <v-autocomplete
    v-if="isActive"
    :items="[1,2,3]"
  ></v-autocomplete>
</Transition>

• Vue Example for Transition using - Vue Docs

const { createApp, ref } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  setup() {
    const isActive = ref(true)
    
    return { isActive }
  }
})
app.use(vuetify).mount('#app')

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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.3.1/dist/vuetify.min.css">

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.3.1/dist/vuetify.min.js"></script>

<div id="app">
  <v-btn @click="isActive = !isActive">Toggle</v-btn>
  <Transition name="fade">
    <v-autocomplete
      v-if="isActive"
      :items="[1,2,3]"
    ></v-autocomplete>
  </Transition>
</div>

Answered By - rozsazoltan