In my Vue project, I am using version 2.6.14 and trying to toggle between two buttons by utilizing v-if and v-else. Despite wrapping everything in a transition element, the first button doesn't transition smoothly, neither when appearing nor disappearing.
<transition name="fade" mode="out-in">
<TappaPaginazione v-if="!$store.state.modal.isOpen" :key="$route.params.slug"/>
<button v-else @click="toggleModal(null)" class="btn">Chiudi</button>
</transition>
.fade-enter-active,
.fade-leave-active {
@apply transition-opacity duration-500 ease-in-out;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
Any suggestions on why this might be happening?