{"id":15527207,"url":"https://github.com/captaincodeman/x-transition","last_synced_at":"2025-04-23T12:17:04.507Z","repository":{"id":66357935,"uuid":"299090171","full_name":"CaptainCodeman/x-transition","owner":"CaptainCodeman","description":"Transition effect web-component","archived":false,"fork":false,"pushed_at":"2020-12-09T16:59:32.000Z","size":570,"stargazers_count":16,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-23T12:16:38.851Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CaptainCodeman.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-27T18:07:11.000Z","updated_at":"2025-01-22T23:51:27.000Z","dependencies_parsed_at":"2023-02-22T12:46:32.471Z","dependency_job_id":null,"html_url":"https://github.com/CaptainCodeman/x-transition","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fx-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fx-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fx-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fx-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CaptainCodeman","download_url":"https://codeload.github.com/CaptainCodeman/x-transition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250430600,"owners_count":21429324,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T11:05:04.512Z","updated_at":"2025-04-23T12:17:04.502Z","avatar_url":"https://github.com/CaptainCodeman.png","language":"HTML","readme":"# x-transition\n\nA 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).\n\nAutomatically handles nested transitions so parent isn't hidden until child transitions have completed.\n\n702 bytes Brotli, 877 bytes Gzipped, 2.28 KB Minified.\n\n[demo](https://x-transition.web.app/)\n\n## Usage\n\nWrap the element to transition with `\u003cx-transition\u003e` and set the `open` attribute or `.open` property to control visibility. Define the classes to apply using the attributes:\n\n* `enter` Applied when the element is being shown (enter transition)\n* `enter-from` Applied at the start of the enter transition\n* `enter-to` Applied at the end of the enter transition\n* `leave` Applied when the element is being hidden (leave transition)\n* `leave-from` Applied at the start of the leave transition\n* `leave-to` Applied at the end of the leave transition\n\nAfter enter, the elements `style.display` property is cleared.\nAfter leave, the elements `style.display` property is set to `none`.\n\nIf the enter \u0026 leave transitions are symmetrical, a more compact definition can be used:\n\n* `with` Will apply the same values to `enter` and `leave`.\n* `show` Will apply the same values to `enter-to` and `leave-from` (i.e. the showing state).\n* `hide` Will apply the same values to `enter-from` and `leave-to` (i.e. the hiding state).\n\n### CDN / Static HTML / Vanilla JS\n\nAdd the script to the page:\n\n```html\n\u003cscript src=\"https://unpkg.com/@captaincodeman/transition?module\" type=\"module\"\u003e\u003c/script\u003e\n```\n\nWrap elements to transition with `\u003cx-transition\u003e` element using Tailwind CSS suggested classes:\n\n```html\n\u003c!--\n  Off-canvas menu overlay, show/hide based on off-canvas menu state.\n\n  Entering: \"transition-opacity ease-linear duration-300\"\n    From: \"opacity-0\"\n    To: \"opacity-100\"\n  Leaving: \"transition-opacity ease-linear duration-300\"\n    From: \"opacity-100\"\n    To: \"opacity-0\"\n--\u003e\n\u003cx-transition\n    id=\"overlay\"\n    enter=\"transition-opacity ease-linear duration-300\"\n    enter-from=\"opacity-0\"\n    enter-to=\"opacity-100\"\n    leave=\"transition-opacity ease-linear duration-300\"\n    leave-from=\"opacity-100\"\n    leave-to=\"opacity-0\"\u003e\n  \u003cdiv class=\"fixed inset-0\"\u003e\n    \u003cdiv class=\"absolute inset-0 bg-gray-600 opacity-75\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/x-transition\u003e\n```\n\nOr, alternatively, using the shortened form:\n\n```html\n\u003cx-transition \n    id=\"overlay\"\n    with=\"transition-opacity ease-linear duration-300\"\n    hide=\"opacity-0\"\n    show=\"opacity-100\"\u003e\n    \u0026hellip;\n\u003c/x-transition\u003e\n```\n\nShow or hide the child element, with transition effects, by adding an `open` attribute to the `\u003cx-transition\u003e` element or by setting the `.open` property to true.\n\n```js\nfunction showMenu() {\n  overlay.open = true\n}\n```\n\n### Compiled Script\n\nInstall using `npm`:\n\n    npm install --save @captaincodeman/transition\n\nImport into app:\n\n```ts\nimport '@captaincodeman/transition'\n```\n\nInclude in template using Tailwind CSS suggested classes setting show based on app templating system used (lit-element for instance):\n\n```html\n\u003c!--\n  Profile dropdown panel, show/hide based on dropdown state.\n\n  Entering: \"transition ease-out duration-200\"\n    From: \"transform opacity-0 scale-95\"\n    To: \"transform opacity-100 scale-100\"\n  Leaving: \"transition ease-in duration-75\"\n    From: \"transform opacity-100 scale-100\"\n    To: \"transform opacity-0 scale-95\"\n--\u003e\n\u003cx-transition\n    enter=\"transition ease-out duration-200\"\n    enter-from=\"transform opacity-0 scale-95\"\n    enter-to=\"transform opacity-100 scale-100\"\n    leave=\"transition ease-in duration-75\"\n    leave-from=\"transform opacity-100 scale-100\"\n    leave-to=\"transform opacity-0 scale-95\"\n  \u003e\n  \u003cdiv class=\"origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg\"\u003e\n    \u0026hellip;\n  \u003c/div\u003e\n\u003c/x-transition\u003e\n```\n\n### Group Key\n\nIt'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.\n\ne.g. all mobile menu related transitions might have `key=\"mobile-menu\"` which would make them ignore events from other transitions and vice-versa.\n\n### TODO\n\nUse [tailwind example code](https://blog.tailwindcss.com/utility-friendly-transitions-with-tailwindui-react)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fx-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaptaincodeman%2Fx-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fx-transition/lists"}