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

admin管理员组

文章数量:1391998

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

Share Improve this question Follow edited Mar 31, 2020 at 13:28 Micheal J. Roberts asked Feb 28, 2020 at 10:45 Micheal J. RobertsMicheal J. Roberts 4,21066 gold badges5353 silver badges9696 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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"
>

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

本文标签： javascriptTranslating Alpinejs xtransitions to Vuejs transition classesStack Overflow