将 Alpine.js x 转换转换为 Vue.js 转换 类?
Translating Alpine.js x-transitions to Vue.js transition classes?
所以,我在概念上有一个小问题。我也承认我主要是一名后端开发人员和松散的前端开发人员,希望更好地学习 UI/UX principles/frameworks 等,如果这是一个相对简单的问题,请提前致歉。
我在 Alpine.js 中构建了以下 x-transition
示例:
<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>
但是,唉,什么都没有。怎么办?
我想这可能就是您要找的东西
<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"
>
我认为这个特定问题来自尝试使用 Tailwind's UI Hero Section components 之一,但使用 VueJS 而不是 Alpine(这是 Tailwind UI 使用的)。
在这个特定的示例中,您还必须为 VueJs 更改 Alpine 的 x-show 和 x-data v-if 指令。 (至少这就是我让它工作的方式)。
此外,您还必须像这样在 vue 数据中声明开放 属性:(我的组件名称是 Cover 而不是 HeroSection)
export default {
name: 'Cover',
data() {
return {
open: false
}
}
}
所以,我在概念上有一个小问题。我也承认我主要是一名后端开发人员和松散的前端开发人员,希望更好地学习 UI/UX principles/frameworks 等,如果这是一个相对简单的问题,请提前致歉。
我在 Alpine.js 中构建了以下 x-transition
示例:
<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>
但是,唉,什么都没有。怎么办?
我想这可能就是您要找的东西
<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"
>
我认为这个特定问题来自尝试使用 Tailwind's UI Hero Section components 之一,但使用 VueJS 而不是 Alpine(这是 Tailwind UI 使用的)。
在这个特定的示例中,您还必须为 VueJs 更改 Alpine 的 x-show 和 x-data v-if 指令。 (至少这就是我让它工作的方式)。
此外,您还必须像这样在 vue 数据中声明开放 属性:(我的组件名称是 Cover 而不是 HeroSection)
export default {
name: 'Cover',
data() {
return {
open: false
}
}
}