Переводить Alpine. js x-переходов на Vue. js классов переходов? - PullRequest
Новая
       14

Переводить Alpine. js x-переходов на Vue. js классов переходов?

2 голосов
/ 28 февраля 2020

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

I у меня есть следующий 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>

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

Ответы [ 2 ]

3 голосов
/ 02 марта 2020

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

<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"
>
0 голосов
/ 08 апреля 2020

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

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

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

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