{"id":19522157,"url":"https://github.com/captaincodeman/svelte-transition","last_synced_at":"2025-05-05T14:42:34.185Z","repository":{"id":66357929,"uuid":"449414584","full_name":"CaptainCodeman/svelte-transition","owner":"CaptainCodeman","description":"Svelte Transition Component","archived":false,"fork":false,"pushed_at":"2024-08-28T21:30:04.000Z","size":232,"stargazers_count":61,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-01T20:49:08.112Z","etag":null,"topics":["animation","svelte","tailwind","transition"],"latest_commit_sha":null,"homepage":"https://captaincodeman.github.io/svelte-transition/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":"LICENSE","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":"2022-01-18T19:12:15.000Z","updated_at":"2025-04-13T13:56:32.000Z","dependencies_parsed_at":"2023-11-13T21:27:57.392Z","dependency_job_id":"143e29ce-4ccf-4dbb-96c4-9e0a27e3dd9a","html_url":"https://github.com/CaptainCodeman/svelte-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%2Fsvelte-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CaptainCodeman","download_url":"https://codeload.github.com/CaptainCodeman/svelte-transition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252516211,"owners_count":21760745,"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":["animation","svelte","tailwind","transition"],"created_at":"2024-11-11T00:37:26.658Z","updated_at":"2025-05-05T14:42:34.168Z","avatar_url":"https://github.com/CaptainCodeman.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-transition\n\nSvelte component to make using CSS class based transitions easier - ideally suited for use with [TailwindCSS](https://tailwindcss.com/)\n\nLoosely modeled on the [HeadlessUI Transition](https://headlessui.dev/react/transition).\n\nAbout 3Kb / 1.5Kb gzipped\n\n## Installation\n\nInstall using your package manager of choice:\n\n```bash\npnpm i svelte-transition\n```\n\n## Usage\n\nImport into your component and use a flag to control whether to show or hide an HTML Element.\n\n```ts\nimport Transition from 'svelte-transition'\n\nlet show = false\n```\n\nWrap the HTML Element with the `\u003cTransition\u003e` component, setting the flag to toggle visibility and the classes to apply when transitioning:\n\n```html\n\u003cTransition\n\t{show}\n\tenter=\"ease-in-out duration-300\"\n\tenterFrom=\"opacity-0\"\n\tenterTo=\"opacity-100\"\n\tleave=\"ease-in-out duration-300\"\n\tleaveFrom=\"opacity-100\"\n\tleaveTo=\"opacity-0\"\n\u003e\u003c/Transition\u003e\n```\n\n## Shortcut\n\nIf the leave transition is the opposite of the enter transition it can be omitted to save bytes. This is identical to the previous example:\n\n```html\n\u003cTransition {show} enter=\"ease-in-out duration-300\" enterFrom=\"opacity-0\" enterTo=\"opacity-100\"\u003e\u003c/Transition\u003e\n```\n\ni.e. `leave` will equal `enter`, `leaveFrom` will equal `enterTo`, and `leaveTo` will equal `enterFrom` unless you override them.\n\n## Appear\n\nSet `appear` to have the transition play on initial mount.\n\nDefault `false`.\n\n## Unmount\n\nSet `unmount` to have the transitioned element removed from the DOM when not shown (instead of just hidden).\n\nDefault `false`.\n\n## Co-ordinating Transitions\n\nIf the `show` property is ommitted then the transition is treated as a child and will receive it's state from it's parent. The parent will automatically wait for it's children to finish transitioning before they are unmounted or hidden, so the animations can complete.\n\n## Events\n\nThe component raises events to indicate when any transition is running:\n\n- `before-enter` runs before the enter transition happens\n- `after-enter` runs after the enter transition happens\n- `before-leave` runs before the leave transition happens\n- `after-leave` runs after the leave transition happens\n\n## TailwindUI\n\nIf you're converting from TailwindUI markup, you can use this [handy converter](https://captaincodeman.github.io/svelte-transition/) to convert the comments into `\u003cTransition\u003e` markup and classes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fsvelte-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaptaincodeman%2Fsvelte-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fsvelte-transition/lists"}