自定义过渡类不适用于 Vue.js [英] custom transition classes don't work on Vue.js

问题描述

我正在尝试使用带有 Tailwinds 的 Vue.js 在我的代码中使用一些转换.我的环境包括 Laravel Jetstream 和 vue 自带的 Inertia.

I'm trying to use some transition in my code using Vue.js with Tailwinds. My environment include Laravel Jetstream with Inertia that comes with vue.

我注意到使用此表单一切正常:

I notices that using this form everything work:

<transition name="some-name">
  <div v-if="something"></div>
 </transition>
 
 

以及我的 CSS 中的这些类:

and this classes in my CSS:

.some-name-enter {
  transform: translateX(-100%);
}
.some-name-leave-to {
  transform: translateX(-100%);
}
.some-name-leave-active,
.some-name-enter-active {
  transition: all 0.5s ease-in-out;
}

但是当我尝试使用这个语法时:

but when i try to use this sintax:

<transition           
  enter-active-class="transition ease-out duration-100 transform"
  enter-from-class="opacity-0 scale-95"
  enter-to-class="opacity-100 scale-100"
  leave-active-class="transition ease-in duration-75 transform"
  leave-from-class="opacity-100 scale-100"
  leave-to-class="opacity-0 scale-95"
>
  <div v-if="something"></div>
</transition>

它不起作用..我只是想使用顺风类进行过渡，它们非常易于使用，无需编写大量css行.

it is not working.. i just would like to use tailwind classes for the transition, they are very easy to use and there is no need to write lots of rows of css.

我不知道这是否重要，但我使用的是 vue 2.6.12.提前感谢您的帮助.

i dont know if it is important but i am using vue 2.6.12. thanks in advance for your help.

推荐答案

enter 和 leave 类的开始都不需要 fromem>.也就是说，它们只是 enter-class 和 leave-class 而不是 enter-from-class 和 leave-from-class 根据 this.

The beginning for both the enter and leave classes does not need the from. That is, they are just enter-class and leave-class and not enter-from-class and leave-from-class as per this.

这篇关于自定义过渡类不适用于 Vue.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！