{"id":13796508,"url":"https://github.com/voluntadpear/qwik-transition","last_synced_at":"2025-03-17T00:33:02.556Z","repository":{"id":86502444,"uuid":"606596779","full_name":"voluntadpear/qwik-transition","owner":"voluntadpear","description":"Light-weight custom Qwik hook for adding smooth CSS transitions to your Qwik components.","archived":false,"fork":false,"pushed_at":"2023-05-08T01:09:36.000Z","size":437,"stargazers_count":48,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-19T07:10:36.970Z","etag":null,"topics":["css","qwik","transitions"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/voluntadpear.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-02-26T00:38:20.000Z","updated_at":"2024-09-11T17:47:38.000Z","dependencies_parsed_at":"2023-07-06T18:17:16.183Z","dependency_job_id":null,"html_url":"https://github.com/voluntadpear/qwik-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/voluntadpear%2Fqwik-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voluntadpear%2Fqwik-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voluntadpear%2Fqwik-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voluntadpear%2Fqwik-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/voluntadpear","download_url":"https://codeload.github.com/voluntadpear/qwik-transition/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221495623,"owners_count":16832514,"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":["css","qwik","transitions"],"created_at":"2024-08-03T23:01:11.170Z","updated_at":"2024-10-27T11:36:20.161Z","avatar_url":"https://github.com/voluntadpear.png","language":"TypeScript","funding_links":[],"categories":["Libraries"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003cimg width=\"400\" src=\"https://github.com/voluntadpear/qwik-transition/blob/main/markdown-assets/logo-color.svg\" alt=\"qwik-transition\"\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003ch1 align='center'\u003eqwik-transition\u003c/h1\u003e\n\n\u003cdiv align='center'\u003e\nLightweight (\u003cstrong\u003e\u003c1kb gzip\u003c/strong\u003e) and easy-to-use custom Qwik hook for adding smooth animations and effects to your Qwik components. This hook is based on \u003ca href=\"https://github.com/iamyoki/transition-hook\"\u003e@iamyoki/transition-hook\u003c/a\u003e.\n\u003cbr\u003e\u003cbr\u003e\n  \u003ca href='https://img.shields.io/npm/v/qwik-transition?label=npm%20version'\u003e\n  \u003cimg src='https://img.shields.io/npm/v/qwik-transition?label=npm%20version' alt='qwik-transition npm'\u003e\n  \u003c/a\u003e\n  \u003ca href='https://opensource.org/licenses/MIT'\u003e\n  \u003cimg src='https://img.shields.io/badge/License-MIT-green.svg' alt='MIT'\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\" style=\"font-size: 16px;\"\u003e\n\u003ca href=\"https://stackblitz.com/edit/qwik-starter-jbwvdb?file=src/routes/index.tsx\"\u003e\n    \u003cimg src=\"https://github.com/voluntadpear/qwik-transition/raw/main/markdown-assets/qwik-transition-demo.gif\" width=\"500\" alt=\"example\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://stackblitz.com/edit/qwik-starter-jbwvdb?file=src/routes/index.tsx\" target=\"_blank\"\u003eView demo in StackBlitz\u003c/a\u003e |\n  \u003ca href=\"https://github.com/voluntadpear/qwik-transition/blob/main/src/example/app.tsx\" target=\"_blank\"\u003eView example source code\u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\n```bash\nnpm install qwik-transition\n```\n\n## Usage\n\n### useCSSTransition\n\nThis hook transforms a boolean state into a transition stage, which allows you to control your CSS transitions.\n\n```jsx\nimport { component$, useSignal } from \"@builder.io/qwik\";\nimport { useCSSTransition } from \"qwik-transition\";\n\nexport default component$(() =\u003e {\n  const onOff = useSignal(true);\n  const { stage, shouldMount } = useCSSTransition(onOff, { timeout: 300 });\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton\n        onClick$={() =\u003e {\n          onOff.value = !onOff.value;\n        }}\n      \u003e\n        toggle\n      \u003c/button\u003e\n      {shouldMount.value \u0026\u0026 (\n        \u003cp\n          style={{\n            transition: \".3s\",\n            opacity: stage.value === \"enterTo\" ? 1 : 0,\n          }}\n        \u003e\n          Hey guys, I'm fading\n        \u003c/p\u003e\n      )}\n    \u003c/div\u003e\n  );\n});\n```\n\n## API Reference\n\n### useCSSTransition(signal, { timeout, transitionOnAppear })\n\n```js\nconst { stage, shouldMount } = useCSSTransition(onOff, {\n  timeout: 300,\n  transitionOnAppear: true,\n});\n```\n\n**Parameters:**\n* `signal: Signal\u003cboolean\u003e`:  **Required**. Your boolean signal, which controls animation in and out.\n* `options: { timeout: number = 0; transitionOnAppear: boolean = false; }`:\n  *  `timeout`: How long before the transition ends and the component unmounts.\n  * `transitionOnAppear`: Whether to set the `enterFrom` stage value on the initial mount of the page or not.\n\n**Returns:**\n* `stage: Signal\u003c\"enterFrom\" | \"enterTo\" | \"leaveFrom\" | \"leaveTo\" | \"idle\"\u003e`: Current stage of the transition.\n  * **`idle`**: No transition.\n  * **`enterFrom`**: The element will enter. The transition begins. Use this value to set the starting values of your enter transition.\n  * **`enterTo`**: Added in the next tick after `enterFrom`. Use this value to set the ending values of your enter transition.\n  * **`leaveFrom`**: The element will disappear. The transition beings. Use this value to set the starting values of your exit transition.\n  * **`leaveTo`**: Added in the next tick after `leaveFrom`. Use this value to set the ending values of your exit transition.\n* `shouldMount: Signal\u003cboolean\u003e`: Whether the component should be mounted or not. The `timeout` you specify as one of the options is important here to time when `shouldMount` changes from `true` to `false`.\n\n## Acknowledgments\n\nThis hook is adapted from https://github.com/iamyoki/transition-hook. Many thanks to the original author!\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoluntadpear%2Fqwik-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvoluntadpear%2Fqwik-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoluntadpear%2Fqwik-transition/lists"}