Перевод x-переходов Alpine.js в классы перехода Vue.js?

Question

Итак, у меня небольшая концептуальная проблема. Я также признаю, что я в первую очередь бэкенд-разработчик и свободный фронтенд-разработчик, стремящийся лучше изучить принципы / фреймворки UI/UX и т. Д., Поэтому приношу извинения заранее, если это относительно простой вопрос.

У меня есть следующие x-transition пример, который был построен в 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>

Я попытался перевести это на анимацию перехода в 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>

Но, увы, ничего. Что делать?

Answer 1

Я думаю, это может быть то, что ты ищешь

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

Answer 2

Я думаю, что этот конкретный вопрос возникает из-за попытки использовать один из компонентов раздела героев пользовательского интерфейса Tailwind, но с использованием VueJS вместо Alpine (что и используется в пользовательском интерфейсе Tailwind).

в этом конкретном примере вам также придется изменить x-show и x-data Alpine для директивы v-if VueJs. (по крайней мере, так я заставил его работать).

Также вам нужно будет объявить свойство open в данных vue следующим образом: (Имя моего компонента было Cover вместо HeroSection)

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