Translating Alpine.js x-transitions to Vue.js transition classes?

Question

So, I have a slight conceptual problem. I'll also admit I am primarily a back end developer and loose front end developer looking to learn better UI/UX principles/frameworks etc so apologies in advanced if this is a relatively straightforward question.

I have the the following x-transition example that was built in Alpine.js:

<div
    x-show="open"
    x-transition:enter="transition ease-out duration-100"
    x-transition:enter-start="transform opacity-0 scale-95"
    x-transition:enter-end="transform opacity-100 scale-100"
    x-transition:leave="transition ease-in duration-75"
    x-transition:leave-start="transform opacity-100 scale-100"
    x-transition:leave-end="transform opacity-0 scale-95"
>...</div>

I have attempted to translate this to the transition animation in Vue.js

<transition
    name="custom-classes-transition"
    enter-class="transition ease-out duration-100"
    enter-active-class="transform opacity-0 scale-95"
    enter-to-class="transform opacity-100 scale-100"
    leave-class="transition ease-in duration-75"
    leave-active-class="transform opacity-100 scale-100"
    leave-to-class="transform opacity-0 scale-95"
>
    <div v-if="open>

    </div>
</transition>

But, alas, nothing. What to do?

Answer 1

I think this might be what you're looking for

<transition
    enter-active-class="transition duration-100 ease-out"
    leave-active-class="transition duration-75 ease-in"
    enter-class="transform opacity-0 scale-95"
    enter-to-class="transform opacity-100 scale-100"
    leave-class="transform opacity-100 scale-100"
    leave-to-class="transform opacity-0 scale-95"
>