Attempting to conditionally display or hide a selection text field using Vue's Transition feature, but experiencing an issue where the text field appears and disappears without any transition effect.
<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>
Various attempts have been made, such as placing the v-if on the v-autocomplete component instead of the Transition, yet the desired behavior is not achieved. An example can be seen on Vuetify Playground
Inquiring about what could be going wrong with my approach. If achieving this behavior through Transition is not viable, seeking alternative methods to attain the same outcome.