{"id":16773191,"url":"https://github.com/javaluo/react-flip-animate","last_synced_at":"2025-03-16T17:14:35.985Z","repository":{"id":91926527,"uuid":"170476047","full_name":"javaLuo/react-flip-animate","owner":"javaLuo","description":"flip 实现","archived":false,"fork":false,"pushed_at":"2019-02-14T03:32:00.000Z","size":707,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-24T07:52:10.291Z","etag":null,"topics":["flip"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javaLuo.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":"2019-02-13T09:08:15.000Z","updated_at":"2021-09-24T04:36:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"f46084e7-ebbf-4632-b894-d5eaa948e239","html_url":"https://github.com/javaLuo/react-flip-animate","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/javaLuo%2Freact-flip-animate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Freact-flip-animate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Freact-flip-animate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Freact-flip-animate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javaLuo","download_url":"https://codeload.github.com/javaLuo/react-flip-animate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243902288,"owners_count":20366260,"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":["flip"],"created_at":"2024-10-13T06:44:57.273Z","updated_at":"2025-03-16T17:14:35.953Z","avatar_url":"https://github.com/javaLuo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-flip-animate [![npm](https://img.shields.io/npm/v/react-flip-animate.svg)](https://www.npmjs.com/package/react-flip-animate)\n\nFLIP （First-Last-Invert-Play）动画组件\u003cbr/\u003e\n自己实现了一个，不建议用于生产，我暂时还没做太多测试，只是想自己研究一下FLIP。\n\n### 示例\n\n![img](public/demo.GIF)\n\n### 安装和使用\n\n```javascript\nyarn add react-flip-animate\n\nimport Flip from \"react-flip-animate\";\n\nconst data = [1,2,3];\n\n\u003cFlip\u003e\n  {(()=\u003e{\n    return data.map(item =\u003e \u003cdiv key={item}\u003e{item}\u003c/div\u003e)\n  })()}\n\u003c/Flip\u003e\n```\n\n### 注意\n* 每个子元素需要一个唯一的key值，不要用data.map((item,index)=\u003e...)中的index作为key，react的虚拟DOM会复用已存在的DOM元素。所以建议用数据中的id或者数据本身作为key值\n\n### 参数\n\n| 参数名     | 类型   | 默认值 | 说明                                          |\n| ---------- | ------ | ------ | --------------------------------------------- |\n| tag        | String | \"div\"  | 指定生成的包裹标签，\u003cFlip\u003e默认被渲染为一个div |\n| speed      | Number | 300    | 动画速度，单位：ms                            |\n| className  | String | null   | 组件的class，会自动附加给\u003cFlip\u003e顶层容器       |\n| transClass | String | null   | 自定义元素进入和离开的class                   |\n\n### 例子\n\n```javascript\n  import \"./index.less\";\n\n  \u003cFlip\n    tag=\"ul\"\n    speed={500}\n    transClass=\"hello\"\n  \u003e\n    \u003cli key=\"a\"\u003e...\u003c/li\u003e\n    \u003cli key=\"b\"\u003e...\u003c/li\u003e\n  \u003c/Flip\u003e\n\n  # index.less:\n\n    hello-enter{ // 定义一个元素在被插入之前的初始状态\n      opacity: 0;\n      transform: translateY(20px);\n    }\n\n    hello-leave{ // 定义一个元素在离开之后的最终状态\n      opacity: 0;\n      transform: translateY(-20px);\n    }\n```\n\n### 说明\n\n* 只支持opacity和transform的变换\n* 元素被插入后的状态一律是```opacity:1; transform:translate(0,0);```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Freact-flip-animate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavaluo%2Freact-flip-animate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Freact-flip-animate/lists"}