https://github.com/captaincodeman/x-transition
Transition effect web-component
https://github.com/captaincodeman/x-transition
Last synced: 9 months ago
JSON representation
Transition effect web-component
- Host: GitHub
- URL: https://github.com/captaincodeman/x-transition
- Owner: CaptainCodeman
- Created: 2020-09-27T18:07:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-09T16:59:32.000Z (about 5 years ago)
- Last Synced: 2025-04-23T12:16:38.851Z (9 months ago)
- Language: HTML
- Size: 557 KB
- Stars: 16
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# 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](https://x-transition.web.app/)
## 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).
### CDN / Static HTML / Vanilla JS
Add the script to the page:
```html
```
Wrap elements to transition with `` element using Tailwind CSS suggested classes:
```html
```
Or, alternatively, using the shortened form:
```html
…
```
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
}
```
### Compiled Script
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
…
```
### 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.
### TODO
Use [tailwind example code](https://blog.tailwindcss.com/utility-friendly-transitions-with-tailwindui-react)