{"id":21614479,"url":"https://github.com/binfoe/react-transition","last_synced_at":"2025-03-18T16:47:43.271Z","repository":{"id":221456867,"uuid":"754408106","full_name":"binfoe/react-transition","owner":"binfoe","description":"simple react transition and transition-group library","archived":false,"fork":false,"pushed_at":"2024-02-27T05:40:42.000Z","size":88,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-24T20:41:27.366Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/binfoe.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":"2024-02-08T01:27:11.000Z","updated_at":"2024-02-08T03:23:59.000Z","dependencies_parsed_at":"2024-02-08T04:28:45.188Z","dependency_job_id":"7d9c90aa-00d8-4bc3-b927-b4f9cb332fe3","html_url":"https://github.com/binfoe/react-transition","commit_stats":null,"previous_names":["binfoe/react-transition"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binfoe%2Freact-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binfoe%2Freact-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binfoe%2Freact-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binfoe%2Freact-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/binfoe","download_url":"https://codeload.github.com/binfoe/react-transition/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244265998,"owners_count":20425824,"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-11-24T22:08:08.622Z","updated_at":"2025-03-18T16:47:43.250Z","avatar_url":"https://github.com/binfoe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react transition\n\n\u003e simple react transition and transition-group library\n\n## Install\n\n```bash\npnpm install reactrans\n```\n\n## Transition\n\n### Usage\n\n```tsx\nimport { Transition } from 'reactrans';\n\nexport const Demo: FC = () =\u003e {\n  const [open, setOpen] = useState(false);\n  return (\n    \u003cdiv className=\"overflow-hidden w-[100vw] h-[100vh] fixed\"\u003e\n      \u003cTransition destroyAfterLeave isEnter={open} enter=\"translate-x-0\" leave=\"translate-x-full\"\u003e\n        \u003cdiv className=\"fixed top-0 right-0 w-30 h-full transition-all p-4\"\u003ehello world\u003c/div\u003e\n      \u003c/Transition\u003e\n      \u003cdiv\u003e\n        \u003cbutton\n          onClick={() =\u003e {\n            setOpen(!open);\n          }}\n        \u003e\n          Toggle\n        \u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Properties\n\n属性参数\n\n- `isEnter` 当前展示状态。true 代表 enter 状态，false 代表 leave 状态。必要参数，用于控制 enter 和 leave 切换动画。\n- `enter` enter 状态的 classname。\n- `leave` leave 状态的 classname。\n- `enterActive`enter 开始时的激活 classname，用于控制 enter 和 leave 使用不同动画。可选参数，默认为空。\n- `leaveActive`leave 开始时的激活 classname，用于控制 enter 和 leave 使用不同动画。可选参数，默认为空。\n- `destroyAfterLeave` 是否在 leave 动画后销毁 DOM。可选参数，默认 false。\n- `appear` 是否在首次渲染时展示动画。可选参数默认 false。\n\n回调参数\n\n- `onAfterEnter`: (el) =\u003e void;\n- `onEnterCancelled`: (el) =\u003e void;\n- `onAfterLeave`: (el) =\u003e void;\n- `onLeaveCancelled`: (el) =\u003e void;\n\n## Transition-Group\n\n### Usage\n\n```tsx\nimport { TransitionGroup, Transition } from 'reactrans';\n\nexport const DemoList: FC = () =\u003e {\n  const tt = useState(['a', 'b']);\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={() =\u003e setTt((v) =\u003e [...v, Date.now().toString(32)])}\u003eAdd Item\u003c/button\u003e\n      \u003cTransitionGroup\u003e\n        {tt.map((t, i) =\u003e (\n          \u003cTransition key={t} enter=\"opacity-100\" leave=\" opacity-0\"\u003e\n            \u003cdiv\n              onClick={() =\u003e {\n                setTt((v) =\u003e {\n                  const nv = v.slice();\n                  nv.splice(i, 1);\n                  return nv;\n                });\n              }}\n              className=\"py-2 transition-all duration-[5s]\"\n            \u003e\n              {t}\n            \u003c/div\u003e\n          \u003c/Transition\u003e\n        ))}\n      \u003c/TransitionGroup\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n### Properties\n\n- `appear` 是否在首次渲染时展示动画。可选参数，默认 false。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinfoe%2Freact-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbinfoe%2Freact-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinfoe%2Freact-transition/lists"}