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">

過場效果命名

目前預設過場元件是 Headless UI 的 <TransitionRoot>，因此需要使用 vue-transition 來改為使用 Vue 內建的過場元件，才能使用過場效果命名。

注意

v0.14+ 的版本才能使用 vue-transition。

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

<Float
  vue-transition
  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>