Vue 与 Tailwind 的过渡

Question

为什么 Tailwind 不能直接作用于 element？

这不起作用：

<template>
      <transition
        enter-class="opacity-0"
        enter-active-class="transition-opacity duration-300 ease-out"
        leave-class="opacity-0"
        leave-active-class="transition-opacity duration-300 ease-out"
      >
        Test
      </transition>
</template>

但是这个：

<template>
    <transition name="fade">
        Test
    </transition>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
  @apply transition-opacity duration-300 ease-out;
}
.fade-enter,
.fade-leave-active {
  @apply opacity-0;
}
</style>

我需要让它像“但是这个”一样工作，因为我将 Nuxt 与 vite 一起使用，并且我没有让 scss 工作，所以 @apply 不是一个选项。

谢谢。

Answer 1

Vue2 和 Vue3 之间的语法不同。感谢这篇文章，自定义转换类在 Vue.js 上不起作用

<transition
    enter-active-class="duration-300 ease-out"
    enter-from-class="transform opacity-0"
    enter-to-class="opacity-100"
    leave-active-class="duration-200 ease-in"
    leave-from-class="opacity-100"
    leave-to-class="transform opacity-0"
  >
        Test
</transition>

Answer 2

这是我tailwind transition live templates的phpstorm。将参数替换$SELECTION$为您想要转换的参数或按原样使用：

淡入

<transition
  enter-from-class="opacity-0"
  enter-active-class="transition duration-300">
  $SELECTION$
</transition>

消退

<transition
  leave-to-class="opacity-0"
  leave-active-class="transition duration-300">
  $SELECTION$
</transition>

淡入淡出（如果两者都需要）

<transition
  enter-from-class="opacity-0"
  leave-to-class="opacity-0"
  enter-active-class="transition duration-300"
  leave-active-class="transition duration-300">
  $SELECTION$
</transition>

滑入

<transition
  enter-from-class="translate-x-[150%] opacity-0"
  enter-active-class="transition duration-300">
  $SELECTION$
</transition>

滑出

<transition
  leave-to-class="translate-x-[150%] opacity-0"
  leave-active-class="transition duration-300">
  $SELECTION$
</transition>

滑动

<transition
  enter-from-class="translate-x-[150%] opacity-0"
  leave-to-class="translate-x-[150%] opacity-0"
  enter-active-class="transition duration-300"
  leave-active-class="transition duration-300">
  $SELECTION$
</transition>

希望能帮助到你。