x-transition
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).
Automatically handles nested transitions so parent isn't hidden until child transitions have completed.
702 bytes Brotli, 877 bytes Gzipped, 2.28 KB Minified.
Usage
Wrap the element to transition with <x-transition>
and set the open
attribute or .open
property to control visibility. Define the classes to apply using the attributes:
-
enter
Applied when the element is being shown (enter transition) -
enter-from
Applied at the start of the enter transition -
enter-to
Applied at the end of the enter transition -
leave
Applied when the element is being hidden (leave transition) -
leave-from
Applied at the start of the leave transition -
leave-to
Applied at the end of the leave transition
After enter, the elements style.display
property is cleared.
After leave, the elements style.display
property is set to none
.
If the enter & leave transitions are symmetrical, a more compact definition can be used:
-
with
Will apply the same values toenter
andleave
. -
show
Will apply the same values toenter-to
andleave-from
(i.e. the showing state). -
hide
Will apply the same values toenter-from
andleave-to
(i.e. the hiding state).
CDN / Static HTML / Vanilla JS
Add the script to the page:
<script src="https://unpkg.com/@captaincodeman/transition?module" type="module"></script>
Wrap elements to transition with <x-transition>
element using Tailwind CSS suggested classes:
<!--
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">
<div class="fixed inset-0">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
</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>
Show or hide the child element, with transition effects, by adding an open
attribute to the <x-transition>
element or by setting the .open
property to true.
function showMenu() {
overlay.open = true
}
Compiled Script
Install using npm
:
npm install --save @captaincodeman/transition
Import into app:
import '@captaincodeman/transition'
Include in template using Tailwind CSS suggested classes setting show based on app templating system used (lit-element for instance):
<!--
Profile dropdown panel, show/hide based on dropdown state.
Entering: "transition ease-out duration-200"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<x-transition
enter="transition ease-out duration-200"
enter-from="transform opacity-0 scale-95"
enter-to="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leave-from="transform opacity-100 scale-100"
leave-to="transform opacity-0 scale-95"
>
<div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
…
</div>
</x-transition>
Group Key
It's possible that a separate set of transitions could be enclosed within some parent that also uses transitions. To avoid them all reacting / waiting on the wrong things, use a key
attribute to group them.
e.g. all mobile menu related transitions might have key="mobile-menu"
which would make them ignore events from other transitions and vice-versa.