menu

Questions & Answers

Vue 2 <transition mode=out-in> not transitioning the first element

Using Vue 2.6.14 I am toggling between two buttons using v-if and v-else. I wrapped everything inside a transition but the first element never transitions, not in nor out.

<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;
}

What could it be?

Answers(1) :

Turns out it actually was the display: contents; I gave to the custom component. I guess it cant be transitioned

Comments:
2023-01-24 23:20:10
Please mark your answer as accepted when you can.
2023-01-24 23:20:10
SO tells me I have to wait for 2 days