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?

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?

• javascript
• vue.js
• alpine.js

2 Answers 2

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

I think this particular question es from trying to use one of Tailwind's UI Hero Section ponents but using VueJS instead of Alpine (which is what Tailwind UI uses).

in this particular example you will also have to change Alpine's x-show and x-data for VueJs v-if directive. (at least that's how i got it to work).

Also you will have to declare the open property within the vue data like so: (My ponent's name was Cover instead of HeroSection)

export default {
  name: 'Cover',
  data() {
    return {
      open: false
    }
  }
}