Tom Cook

View profile

<x-transition> example

A Web Component for adding animated transition effects by swapping CSS classes. Useful if you want to use Tailwind CSS / Tailwind UI with something other than Alpine.js, Vue or React (e.g. lit-element / lit-html or Vanilla JavaScript).

Resize the screen to show the mobile breakpoint version, then click the menu to see the transitions applied - the menu drawer should slide in from the left and the overlay fade in.

Github Link

Syntax:

<!--
  Off-canvas menu overlay, show/hide based on off-canvas menu state.

  Entering: "transition-opacity ease-linear duration-300"
    From: "opacity-0"
    To: "opacity-100"
  Leaving: "transition-opacity ease-linear duration-300"
    From: "opacity-100"
    To: "opacity-0"
-->
<x-transition
  id="overlay"
  enter="transition-opacity ease-linear duration-300"
  enter-from="opacity-0"
  enter-to="opacity-100"
  leave="transition-opacity ease-linear duration-300"
  leave-from="opacity-100"
  leave-to="opacity-0">
  …
</x-transition>

Or, alternatively, using the shortened form:

<x-transition
id="overlay"
with="transition-opacity ease-linear duration-300"
hide="opacity-0"
show="opacity-100">
  …
</x-transition>