[Vuejs]-Custom transition classes don't work on Vue.js

by

2👍

✅

The beginning for both the enter and leave classes does not need the from. That is, they are just enter-class and leave-class and not enter-from-class and leave-from-class as per this.

👤ValheruBorn

3👍

For vue-2 users, you may follow what is mentioned in @ValheruBorn’s answer.
For vue-3 users, this should work. Also, check the hooks here

This worked for me:

<transition
  enter-active-class="duration-300 ease-out"
  enter-from-class="transform opacity-0 scale-75"
  enter-to-class="opacity-100 scale-100"
  leave-active-class="duration-200 ease-in"
  leave-from-class="opacity-100 scale-100"
  leave-to-class="transform opacity-0 scale-75"
>
  <div v-if="something"></div>
</transition>

Even this works for me:

<transition name="fade">
  <div v-if="something"></div>
</transition>

add use this css

.fade-enter-active { @apply duration-300 ease-out }
.fade-enter-from { @apply transform opacity-0 scale-75 }
.fade-enter-to { @apply opacity-100 scale-100 }
.fade-leave-active { @apply transform duration-200 ease-in }
.fade-leave-from { @apply opacity-100 scale-100 }
.fade-leave-to { @apply opacity-0 scale-75 }
👤Syed

Leave a comment