Transition

<Float> use the <transition> component, just adds the classes of transition:

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
>

When tailwindcss-origin-class is enabled, the corresponding Tailwind CSS origin class will be automatically added according to the placement (e.g. top corresponds to origin-bottom class, bottom-start corresponds to origin-top-left class).

If using the tailwindcss-origin-class, also need to add the origin class to the safelist:

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

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

If need to override the origin class, can use origin-class.

html

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

Named transitions

The default transition component is Headless UI's <TransitionRoot>, so it is necessary to use vue-transition to use Vue's built-in transition component to use the transition effect naming feature.

WARNING

v0.14+ above can use vue-transition.

Use named class to define transition styles:

html

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

The corresponding class:

vue

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

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

Transition ​

Named transitions ​

Transition

Named transitions