Skip to content

Transition (過場)

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

html
<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:

js
// tailwind.config.js
const { tailwindcssOriginSafelist } = require('@headlessui-float/vue')

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

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

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

過場效果命名

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

注意

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

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

html
<Float
  vue-transition
  transition-name="fade"
>

與之對應的的 class:

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

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

Released under the MIT License.