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?

score 8 · Accepted Answer · answered Mar 02 '20 at 16:21

8

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

answered Mar 02 '20 at 16:21

kaitrenbath

181
3

Same for me. Thanks! – Luis Múzquiz Apr 08 '20 at 00:21

score 0 · Answer 2 · answered Apr 08 '20 at 00:16

I think this particular question comes from trying to use one of Tailwind's UI Hero Section components 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 component's name was Cover instead of HeroSection)

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

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

2 Answers2