{"_id":"bee-animate","_rev":"45-170b3b004f19e5e5bb5cad27e3700f5a","name":"bee-animate","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.2":{"name":"bee-animate","version":"0.0.2","keywords":["react","react-component","react-animate","iuap-design","neoui-react","animate"],"author":"","license":"MIT","_id":"bee-animate@0.0.2","maintainers":[{"name":"ahua52","email":"1468492018@qq.com"}],"homepage":"https://github.com/tinper-bee/animate","bugs":{"url":"https://github.com/tinper-bee/animate/issues"},"dist":{"shasum":"37f397d33b7a003b50ffea0ff8a9dc786a45c2a1","tarball":"https://registry.npmjs.org/bee-animate/-/bee-animate-0.0.2.tgz","integrity":"sha512-9Seh2PQ6N2qfh/LQyUmkH70Zf3osz9vOHYppV4nvovPKR74AV2/2s9N3TajggE6qL3ZqxYMs7bfk+x3dRjHMIA==","signatures":[{"sig":"MEYCIQC+VQPYHh+9SdLzmaN50ed4eo5pSwJIx95hPulwWP3WWgIhAOCh8rkquRWQjNyRqKffkRChvtTqjf0Xu0DAn6AQXDJV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./build/index","_from":".","config":{"port":8000},"_shasum":"37f397d33b7a003b50ffea0ff8a9dc786a45c2a1","engines":{"node":">=4.0.0"},"gitHead":"d4f696fc1b12ec301c9a3ffd127d5fc59cab1448","scripts":{"dev":"bee-tools run start","pub":"bee-tools run pub","lint":"bee-tools run lint","test":"bee-tools run test","build":"bee-tools run build","chrome":"bee-tools run chrome","browsers":"bee-tools run browsers"},"_npmUser":{"name":"ahua52","email":"1468492018@qq.com"},"repository":{"url":"git+ssh://git@github.com/tinper-bee/animate.git","type":"git"},"_npmVersion":"3.10.3","description":"animate ui component for react","directories":{},"_nodeVersion":"6.4.0","dependencies":{"classnames":"^2.2.5","tinper-bee-core":"latest"},"devDependencies":{"chai":"^3.5.0","react":"~0.14.0","enzyme":"^2.4.1","es5-shim":"~4.1.10","react-dom":"~0.14.0","console-polyfill":"~0.2.1","react-addons-test-utils":"^15.3.2"},"_npmOperationalInternal":{"tmp":"tmp/bee-animate-0.0.2.tgz_1481599661846_0.278919416712597","host":"packages-18-east.internal.npmjs.com"}},"0.0.3":{"name":"bee-animate","version":"0.0.3","keywords":["react","react-component","react-animate","iuap-design","neoui-react","animate"],"author":"","license":"MIT","_id":"bee-animate@0.0.3","maintainers":[{"name":"ahua52","email":"1468492018@qq.com"}],"homepage":"https://github.com/tinper-bee/animate","bugs":{"url":"https://github.com/tinper-bee/animate/issues"},"dist":{"shasum":"92ac3b3fd7583980e2c99fc0f152e82a738de189","tarball":"https://registry.npmjs.org/bee-animate/-/bee-animate-0.0.3.tgz","integrity":"sha512-8t0kSl0ShLcrgyA0eWZNuyp5ECGwlYUStFWW03tNzyKpP0k0cptgx5Tr1X6EeXc6aRCTBcu9LJMKZWKaGuhFyw==","signatures":[{"sig":"MEUCICoQCYiquvher4WA01U2fr4UvtAuhfGCzkgLh0FoFFSuAiEAxWBVtpYisetr4xo9+249jJP+oywhEP4yhggRDQHKzig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./build/index","_from":".","config":{"port":8000},"_shasum":"92ac3b3fd7583980e2c99fc0f152e82a738de189","engines":{"node":">=4.0.0"},"gitHead":"823a53d0bf309782b6341a0e7e49ec8b1ecc9181","scripts":{"dev":"bee-tools run start","pub":"bee-tools run pub","lint":"bee-tools run lint","test":"bee-tools run test","build":"bee-tools run build","chrome":"bee-tools run chrome","browsers":"bee-tools run browsers"},"_npmUser":{"name":"ahua52","email":"1468492018@qq.com"},"repository":{"url":"git+ssh://git@github.com/tinper-bee/animate.git","type":"git"},"_npmVersion":"3.10.3","description":"animate ui component for react","directories":{},"_nodeVersion":"6.4.0","dependencies":{"classnames":"^2.2.5","tinper-bee-core":"latest"},"devDependencies":{"chai":"^3.5.0","react":"~0.14.0","enzyme":"^2.4.1","es5-shim":"~4.1.10","react-dom":"~0.14.0","console-polyfill":"~0.2.1","react-addons-test-utils":"15.3.2"},"_npmOperationalInternal":{"tmp":"tmp/bee-animate-0.0.3.tgz_1482126068215_0.6220098871272057","host":"packages-18-east.internal.npmjs.com"}},"1.0.0":{"name":"bee-animate","version":"1.0.0","keywords":["react","react-component","react-animate","iuap-design","neoui-react","animate"],"author":"","license":"MIT","_id":"bee-animate@1.0.0","maintainers":[{"name":"ahua52","email":"1468492018@qq.com"}],"homepage":"https://github.com/tinper-bee/animate","bugs":{"url":"https://github.com/tinper-bee/animate/issues"},"dist":{"shasum":"8e49c891521b4a6a6ef5e50098323652fd05c4f1","tarball":"https://registry.npmjs.org/bee-animate/-/bee-animate-1.0.0.tgz","integrity":"sha512-vCLRKDz0YEACWvNnf22ShlhohY7U6r0nn+RodZdJqjz2KLatFhP8e/fxRc/z4SeoCxTUb6xYGuIgYb7P7kNcWQ==","signatures":[{"sig":"MEUCIHEbL/HfeW/hCHrrSEskvZvqtDtgSm6pRpDlCP90E7BfAiEA3LaXRG9eRzui2nQs5MZiJK4rAHTzQ30DfRMt2/UEg30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./build/index","_from":".","config":{"port":8000},"_shasum":"8e49c891521b4a6a6ef5e50098323652fd05c4f1","engines":{"node":">=4.0.0"},"gitHead":"5edce53f2dfb550ea370d8a954aa138ef9ef240b","scripts":{"dev":"bee-tools run start","pub":"bee-tools run pub","lint":"bee-tools run lint","test":"bee-tools run test","build":"bee-tools run build","chrome":"bee-tools run chrome","browsers":"bee-tools run browsers"},"_npmUser":{"name":"ahua52","email":"1468492018@qq.com"},"repository":{"url":"git+ssh://git@github.com/tinper-bee/animate.git","type":"git"},"_npmVersion":"4.2.0","description":"animate ui component for react","directories":{},"_nodeVersion":"7.10.0","dependencies":{"classnames":"^2.2.5","tinper-bee-core":"latest"},"devDependencies":{"chai":"^3.5.0","react":"15.3.2","enzyme":"^2.4.1","es5-shim":"~4.1.10","react-dom":"15.3.2","console-polyfill":"~0.2.1","react-addons-test-utils":"15.3.2"},"peerDependencies":{"react":"^15.3.0 || ^16.0","react-dom":"^15.3.0 || ^16.0","prop-types":"15.6.0"},"_npmOperationalInternal":{"tmp":"tmp/bee-animate-1.0.0.tgz_1506755649801_0.14574655750766397","host":"s3://npm-registry-packages"}}},"time":{"created":"2016-12-13T03:27:43.784Z","modified":"2024-08-30T07:16:25.402Z","0.0.2":"2016-12-13T03:27:43.784Z","0.0.3":"2016-12-19T05:41:10.231Z","1.0.0":"2017-09-30T07:14:09.918Z"},"bugs":{"url":"https://github.com/tinper-bee/animate/issues"},"license":"MIT","homepage":"https://github.com/tinper-bee/animate","keywords":["react","react-component","react-animate","iuap-design","neoui-react","animate"],"repository":{"url":"git+ssh://git@github.com/tinper-bee/animate.git","type":"git"},"description":"animate ui component for react","maintainers":[{"email":"15330079920@163.com","name":"rongqb"},{"email":"1479605026@qq.com","name":"duxue"},{"email":"wang1084@126.com","name":"jwangyangls"},{"email":"18810786213@163.com","name":"shaohlr"},{"email":"474733244@qq.com","name":"honely1314"},{"email":"liu_xiangyang@sina.cn","name":"xiaoshutong"},{"email":"guoyff@yonyou.com","name":"yonyoufed"},{"email":"jonyshi@126.com","name":"jonyw"},{"email":"13552329235@163.com","name":"guoyongfeng"},{"email":"kvkens@qq.com","name":"kvkens"},{"email":"731215820@qq.com","name":"whizbz"},{"email":"1600714656@qq.com","name":"npm_yx"},{"email":"SLA0630@163.com","name":"bjyxszd"},{"email":"banyudu+tinper@gmail.com","name":"tinper-bot"},{"email":"gaox2025f@gmail.com","name":"gaox2025f"},{"email":"gcht@163.com","name":"gcht163"},{"email":"kvkens@gmail.com","name":"cnkvkens"},{"email":"zzjbarry@126.com","name":"diozhu"},{"email":"617065682@qq.com","name":"wangjings123"},{"email":"1468492018@qq.com","name":"ahua52"}],"readme":"# bee-animate\r\n[![npm version](https://img.shields.io/npm/v/bee-animate.svg)](https://www.npmjs.com/package/bee-animate)\r\n[![Build Status](https://img.shields.io/travis/tinper-bee/generator-tinper-bee/master.svg)](https://travis-ci.org/tinper-bee/bee-animate)\r\n[![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-animate.svg)](https://david-dm.org/tinper-bee/bee-animate#info=devDependencies)\r\n\r\n\r\nreact bee-animate component for tinper-bee\r\n\r\n- transitionName\r\n作为定义的动画名称，也是我们定义css动画样式的一部分。\r\n\r\n```\r\n//css\r\n.move-enter, .move-appear {\r\n opacity: 0;\r\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\r\n animation-duration: 2.5s;\r\n animation-fill-mode: both;\r\n animation-play-state: paused;\r\n}\r\n\r\n.move-leave {\r\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\r\n animation-duration: .5s;\r\n animation-fill-mode: both;\r\n animation-play-state: paused;\r\n}\r\n\r\n.move-enter.move-enter-active, .move-appear.move-enter-active {\r\n animation-name: moveLeftIn;\r\n animation-play-state: running;\r\n}\r\n\r\n.move-leave.move-leave-active {\r\n animation-name: moveRightOut;\r\n animation-play-state: running;\r\n}\r\n\r\n@keyframes moveLeftIn {\r\n 0% {\r\n transform-origin: 0 0;\r\n transform: translateX(30px);\r\n opacity: 0;\r\n background: #f5f5f5;\r\n }\r\n 20% {\r\n transform-origin: 0 0;\r\n transform: translateX(0);\r\n opacity: 1;\r\n }\r\n 80%{\r\n background: #eee;\r\n }\r\n 100%{\r\n background: transparent;\r\n opacity: 1;\r\n }\r\n}\r\n\r\n@keyframes moveRightOut {\r\n 0% {\r\n transform-origin: 0 0;\r\n transform: translateX(0);\r\n opacity: 1;\r\n }\r\n 100% {\r\n transform-origin: 0 0;\r\n transform: translateX(-30px);\r\n opacity: 0;\r\n }\r\n}\r\n\r\n//js\r\n\r\nreturn (\r\n \r\n)\r\n\r\n```\r\n\r\n- animation\r\n\r\nAnimate组件默认使用css3动画，当css3动画不兼容时，调用用户传入的animation对象来操作元素或是产生动画。\r\n```\r\nlet animation = {\r\n /**\r\n * @param node 当前dom元素\r\n * @param callback 相应的回掉函数\r\n */\r\n enter: function(node, callback){\r\n //一些操作\r\n return {\r\n stop:function(){\r\n\r\n $(node).stop(true);\r\n }\r\n };\r\n },\r\n appear: function(node, callback){\r\n //一些操作\r\n return {\r\n stop:function(){\r\n\r\n $(node).stop(true);\r\n }\r\n };\r\n },\r\n leave: function(node, callback){\r\n //一些操作\r\n return {\r\n stop:function(){\r\n\r\n $(node).stop(true);\r\n }\r\n };\r\n }\r\n}\r\n\r\nreturn (\r\n \r\n)\r\n\r\n```\r\n\r\n\r\n\r\n## API\r\n\r\n动画组件存在三个状态`enter`、`appear`、`leave`\r\n\r\n|参数|说明|类型|默认值|\r\n|:--|:---:|:--:|---:|\r\n|component|动画最外层元素|react组件或字符串|span|\r\n|animation|当不支持css3动画时，调用animation| 对象|{}|\r\n|transitionName|动画名称| 对象或字符串||\r\n|transitionEnter|是否支持进入状态| 布尔值|true|\r\n|transitionLeave|是否支持离开状态| 布尔值|true|\r\n|transitionAppear|是否支持停留状态| 布尔值|false|\r\n|exclusive|多个子元素是否独立动画| 布尔值||\r\n|onEnd|结束时的回调函数| 函数||\r\n|onEnter|开始时的回调函数| 函数||\r\n|onLeave|离开时的回调函数| 函数||\r\n|onAppear|停留时的回调函数| 函数||\r\n|showProp|通过制定props设置子元素是否显示| 字符串||\r\n\r\n\r\n\r\n#### 开发调试\r\n\r\n```sh\r\n$ git clone https://github.com/tinper-bee/bee-animate\r\n$ cd bee-animate\r\n$ npm install\r\n$ npm run dev\r\n```\r\n","readmeFilename":"README.md"}