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.

demo

Usage

Wrap the element to transition with 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 to enter and leave.
* show Will apply the same values to enter-to and leave-from (i.e. the showing state).
* hide Will apply the same values to enter-from and leave-to (i.e. the hiding state).

$3

Add the script to the page:

``html

`

Wrap elements to transition with element using Tailwind CSS suggested classes:

`html

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




`

Or, alternatively, using the shortened form:

`html
id="overlay"
with="transition-opacity ease-linear duration-300"
hide="opacity-0"
show="opacity-100">
…

`

Show or hide the child element, with transition effects, by adding an open attribute to the element or by setting the .open property to true.

`js
function showMenu() {
overlay.open = true
}
`

$3

Install using npm:

npm install --save @captaincodeman/transition

Import into app:

`ts
import '@captaincodeman/transition'
`

Include in template using Tailwind CSS suggested classes setting show based on app templating system used (lit-element for instance):

`html

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




`

$3

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.

$3

Use tailwind example code