custom transition classes don't work on Vue.js

Question

I'm trying to use some transition in my code using Vue.js with Tailwinds. My environment include Laravel Jetstream with Inertia that comes with vue.

I notices that using this form everything work:

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

and this classes in my CSS:

.some-name-enter {
  transform: translateX(-100%);
}
.some-name-leave-to {
  transform: translateX(-100%);
}
.some-name-leave-active,
.some-name-enter-active {
  transition: all 0.5s ease-in-out;
}

but when i try to use this sintax:

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

it is not working.. i just would like to use tailwind classes for the transition, they are very easy to use and there is no need to write lots of rows of css.

i dont know if it is important but i am using vue 2.6.12. thanks in advance for your help.

Answer 1

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.