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

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)" >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?

CodePudding user response：

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