将 Alpine.js x-transitions 转换为 Vue.js 转换类？答案

【问题标题】：Translating Alpine.js x-transitions to Vue.js transition classes?将 Alpine.js x-transitions 转换为 Vue.js 转换类？
【发布时间】：2020-06-12 11:04:47
【问题描述】：

所以，我有一点概念上的问题。我还要承认，我主要是一名后端开发人员和松散的前端开发人员，希望学习更好的 UI/UX 原则/框架等，所以如果这是一个相对简单的问题，请提前道歉。

我有以下在 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>

但是，唉，什么都没有。怎么办？

【问题讨论】：

标签： javascript vue.js alpine.js

【解决方案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"
>

【讨论】：

对我来说也一样。谢谢！

【解决方案2】：

我认为这个特殊问题来自于尝试使用 Tailwind's UI Hero Section components 之一，但使用 VueJS 而不是 Alpine（这是 Tailwind UI 使用的）。

在这个特定示例中，您还必须为 VueJs v-if 指令更改 Alpine 的 x-show 和 x-data。（至少这就是我让它工作的方式）。

您还必须像这样在 vue 数据中声明 open 属性：（我的组件的名称是 Cover 而不是 HeroSection）

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

【讨论】：