自定义转换类在 Vue.js 上不起作用

Posted

技术标签:

【中文标题】自定义转换类在 Vue.js 上不起作用【英文标题】:custom transition classes don't work on Vue.js 【发布时间】:2021-04-29 18:42:58 【问题描述】:

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

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

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

我的 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;

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

<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 行。

我不知道它是否重要,但我使用的是 vue 2.6.12。提前感谢您的帮助。

【问题讨论】:

【参考方案1】:

对于 vue-2 用户,您可以按照@ValheruBorn 的回答中提到的内容进行操作。 对于 vue-3 用户,这应该可以。另外,检查钩子here

这对我有用:

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

即使这对我有用:

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

添加使用这个 css

.fade-enter-active  @apply duration-300 ease-out 
.fade-enter-from  @apply transform opacity-0 scale-75 
.fade-enter-to  @apply opacity-100 scale-100 
.fade-leave-active  @apply transform duration-200 ease-in 
.fade-leave-from  @apply opacity-100 scale-100 
.fade-leave-to  @apply opacity-0 scale-75 

【讨论】:

【参考方案2】:

enterleave 类的开头都不需要 from。也就是说,它们只是 enter-classleave-class 而不是 enter-from-classleave-from-class 根据this。

【讨论】:

以上是关于自定义转换类在 Vue.js 上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

自定义 CSS 类在 WordPress 中不起作用

为啥我在 vue.js 中的自定义搜索过滤器不起作用?

自定义后退按钮图像在导航栏上不起作用

UITableView 自定义单元格在 iPad Storyboard 上不起作用,但在 iPhone 上起作用

Vue.js 使用自定义计算属性渲染 v-bind:style 背景图像 url 不起作用

自定义打字稿定义在 Windows 10 上不起作用