{"id":13422309,"url":"https://github.com/DualWield/auto-size-transition","last_synced_at":"2025-03-15T11:31:37.521Z","repository":{"id":57187363,"uuid":"254615117","full_name":"DualWield/auto-size-transition","owner":"DualWield","description":"A component that scale dynamically according to the internal size","archived":false,"fork":false,"pushed_at":"2021-02-25T06:02:00.000Z","size":10,"stargazers_count":9,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T16:47:49.181Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/DualWield.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}},"created_at":"2020-04-10T11:12:01.000Z","updated_at":"2023-08-28T05:52:31.000Z","dependencies_parsed_at":"2022-08-28T11:11:41.237Z","dependency_job_id":null,"html_url":"https://github.com/DualWield/auto-size-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/DualWield%2Fauto-size-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DualWield%2Fauto-size-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DualWield%2Fauto-size-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DualWield%2Fauto-size-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DualWield","download_url":"https://codeload.github.com/DualWield/auto-size-transition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243724957,"owners_count":20337655,"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-07-30T23:00:41.417Z","updated_at":"2025-03-15T11:31:37.235Z","avatar_url":"https://github.com/DualWield.png","language":"TypeScript","funding_links":[],"categories":["UI Animation"],"sub_categories":["Form Components","GraphQL"],"readme":"# React \u0026lt;AutoSizeTransition /\u0026gt;\n\n尺寸大小可以随着内容变化而动态变化\n\nA component that scale dynamically according to the internal size\n\n![](https://s1.ax1x.com/2020/04/10/GTaAeO.gif)\n\n## Usage:\n\n```\nyarn add auto-size-transition\n```\n\n```javascript\nimport AutoSizeTransition from \"auto-size-transition\";\n\n\u003cAutoSizeTransition style={{background: 'red'}}\u003e\n  {visible ? (\n    \u003cdiv style={{ width: 300, display: \"inline-block\", padding: 20 }}\u003e\n      \u003cp\u003e如果天总也不亮，那就摸黑过生活；\u003c/p\u003e\n      \u003cp\u003e如果发出声音是危险的，那就保持沉默；\u003c/p\u003e\n      \u003cp\u003e如果自觉无力发光，那就别去照亮别人。\u003c/p\u003e\n      \u003cp\u003e但是——但是：\u003c/p\u003e\n      \u003cp\u003e不要习惯了黑暗就为黑暗辩护；\u003c/p\u003e\n      \u003cp\u003e不要为自己的苟且而得意洋洋；\u003c/p\u003e\n      \u003cp\u003e不要嘲讽那些比自己更勇敢、更有热量的人们。\u003c/p\u003e\n      \u003cp\u003e可以卑微如尘土，不可扭曲如蛆虫。\u003c/p\u003e\n    \u003c/div\u003e\n  ) : (\n    \u003cdiv style={{ width: 200, display: \"inline-block\", padding: 20 }}\u003e\n      \u003cp\u003e苟利国家生死以 岂因祸福避趋之\u003c/p\u003e\n    \u003c/div\u003e\n  )}\n\u003c/AutoSizeTransition\u003e;\n```\n\n## Demo\nhttps://codesandbox.io/s/goofy-jepsen-0fnh4\n\n## Props\n\n|Name|Type|Default|Description|\n|:--|:--:|:-----:|:----------|\n|[**children**](#date)|\u003ccode\u003eReact.ReactElement\u003c/code\u003e|`required`|Content|\n|[**className**](#key)|\u003ccode\u003estring\u0026#124;string[]\u003c/code\u003e|`undefined`|className of the container|\n|[**style**](#daysinhours)|`React.CSSProperties`|`{}`|style of the container|\n|[**transition**](#daysinhours)|`number`|`0.2`|Milliseconds of change|\n\n\n## Motivation\n因为从height:0 到 height: auto;  transition 是无效的，因为 transition 变化的起点跟终点必须是确定的。故希望有一个组件可以根据内部的大小动态伸缩，同时也有transition的效果。\n\nBecause the transition from height: 0 to height: Auto; is invalid, because the start and end of the transition change must be determined. Therefore, we hope that there is a component that can scale dynamically according to the internal size, and also has the effect of transition.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDualWield%2Fauto-size-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDualWield%2Fauto-size-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDualWield%2Fauto-size-transition/lists"}