所以,我有一个轻微的概念问题。我还要承认我主要是一名后端开发人员和松散的前端开发人员,希望学习更好的 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>
但是,唉,什么都没有。该怎么办?
最佳答案
我想这可能是你正在寻找的
<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"
>
关于javascript - 将 Alpine.js x-transitions 转换为 Vue.js 转换类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60450094/