Skip to content
On this page

Transition (過場)

<Float> 自帶 <transition> 元件,只需要加上過場中需要的 class:

<Float
  enter="transition duration-200 ease-out"
  enter-from="scale-95 opacity-0"
  enter-to="scale-100 opacity-100"
  leave="transition duration-150 ease-in"
  leave-from="scale-100 opacity-100"
  leave-to="scale-95 opacity-0"
  tailwindcss-origin-class
>

開啟 tailwindcss-origin-class 後,會需要根據 placement 自動加上對應的 Tailwind CSS origin class (例:top 對應 origin-bottom class、bottom-start 對應 origin-top-left class)。

如果使用了 tailwindcss-origin-class,也需要在 safelist 中增加 origin class:

tailwind.config.js

const { tailwindcssOriginSafelist } = require('@headlessui-float/vue')

module.exports = {
  safelist: [...tailwindcssOriginSafelist],
}

如果需要指定或覆蓋 origin class,可以用 origin-class

<Float origin-class="origin-top-left">

過場效果命名

使用命名 class 來定義過場 CSS 效果:

<Float transition-name="fade">

與之對應的的 class:

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
Transition (過場) has loaded