自定义转换 类 不适用于 Vue.js
custom transition classes don't work on Vue.js
我正在尝试使用 Vue.js 和 Tailwinds 在我的代码中使用一些转换。我的环境包括 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>
它不工作..我只想使用 tailwind 类 进行过渡,它们非常易于使用并且不需要写很多行 css。
我不知道它是否重要,但我使用的是 vue 2.6.12。预先感谢您的帮助。
enter 和 leave classes 的开头不需要 from。也就是说,它们只是 enter-class 和 leave-class 而不是 enter- from-class 和 leave-from-class 根据 this.
对于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 }
我正在尝试使用 Vue.js 和 Tailwinds 在我的代码中使用一些转换。我的环境包括 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>
它不工作..我只想使用 tailwind 类 进行过渡,它们非常易于使用并且不需要写很多行 css。
我不知道它是否重要,但我使用的是 vue 2.6.12。预先感谢您的帮助。
enter 和 leave classes 的开头不需要 from。也就是说,它们只是 enter-class 和 leave-class 而不是 enter- from-class 和 leave-from-class 根据 this.
对于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 }