{"_id":"@beisen/animation","_rev":"7-481a1b8c1e7de556a86c53579fce65c6","name":"@beisen/animation","description":">1.通过js的方式去操作css，并集成了常见的动画效果,动画效果灵感来源于react-animations,demo:http://react-animations.herokuapp.com/。","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.0":{"name":"@beisen/animation","version":"1.0.0","description":"## 1.安装：","main":"index.js","scripts":{"build":"npm run build:lib && npm run build:umd && npm run build:story","build:lib":"babel src --out-dir lib","build:umd":"webpack src/index.js dist/index.js --config webpack.config.js","build:story":"babel story --out-dir man","test":"karma start","dev":"webpack-dev-server --progress --colors --config webpack.dev.config.js","renew":"git checkout-index -f -a --prefix=../$name/ && cp ./.gitignore ../$name"},"repository":{"type":"git","url":"git@gitlab.beisencorp.com:ux-xhbisme/ux-animation.git"},"author":{"name":"xuhaibin","email":"xuhaibin@beisen.com"},"maintainers":{"0":{"name":"xuhaibin","email":"xuhaibin@beisen.com"}},"license":"ISC","dependencies":{"aphrodite":"^1.2.1","react":"^0.14.6","react-animations":"^0.1.0","react-dom":"^0.14.6"},"devDependencies":{"babel":"^6.5.2","babel-cli":"^6.6.5","babel-core":"^6.7.2","babel-eslint":"^4.1.3","babel-loader":"^6.2.4","babel-preset-airbnb":"^1.0.1","babel-preset-es2015":"^6.3.13","babel-preset-react":"^6.3.13","babel-preset-stage-0":"^6.5.0","case-sensitive-paths-webpack-plugin":"^1.0.1","css-loader":"^0.23.1","enzyme":"^2.0.0","file-loader":"^0.8.5","gulp":"^3.9.1","gulp-concat":"^2.6.0","gulp-insert":"^0.5.0","gulp-rename":"^1.2.2","gulp-replace":"^0.5.4","gulp-sass":"^2.3.2","jasmine-core":"^2.4.1","json-loader":"^0.5.4","karma":"^0.13.19","karma-babel-preprocessor":"^6.0.1","karma-chrome-launcher":"^0.2.2","karma-jasmine":"^0.3.7","karma-webpack":"^1.7.0","node-sass":"^3.4.2","react-addons-test-utils":"^0.14.7","sass-loader":"^3.2.0","style-loader":"^0.13.0","url-loader":"^0.5.7","webpack":"^1.12.10","webpack-dev-server":"^1.14.0"},"gitHead":"e90e60a06892549bee44028663a2cb05981490d9","_id":"@beisen/animation@1.0.0","_shasum":"a1a32b7712e5a8f8497cda7df5bdafa052e7f84c","_from":".","_npmVersion":"3.10.9","_nodeVersion":"4.4.1","_npmUser":{"name":"beisen","email":"ci@beisen.com"},"dist":{"shasum":"a1a32b7712e5a8f8497cda7df5bdafa052e7f84c","tarball":"https://registry.npmjs.org/@beisen/animation/-/animation-1.0.0.tgz","integrity":"sha512-RAYNEL3TEvSt54TsjZONuf0FaXF6YTzbmesSE/k6zIjijPDKOJuXKgNLdAzD3TqjZjbDvPQfVcAs4t3dQg4sBw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDP+1KrrqeXERP2KJRVNQrgW8GX2/QyCYNw2MxOerDaSQIhAM/0sR3/EaqU2Ifs8ydeWE4gJCQ59enVhnFOLTYDMoU9"}]},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animation-1.0.0.tgz_1499860139736_0.13842142513021827"}},"1.0.2":{"name":"@beisen/animation","version":"1.0.2","description":"## 1.安装：","main":"index.js","scripts":{"build":"npm run build:lib && npm run build:umd && npm run build:story","build:lib":"babel src --out-dir lib","build:umd":"webpack src/index.js dist/index.js --config webpack.config.js","build:story":"babel story --out-dir man","test":"karma start","dev":"webpack-dev-server --progress --colors --config webpack.dev.config.js","renew":"git checkout-index -f -a --prefix=../$name/ && cp ./.gitignore ../$name"},"repository":{"type":"git","url":"git@gitlab.beisencorp.com:ux-xhbisme/ux-animation.git"},"author":{"name":"xuhaibin","email":"xuhaibin@beisen.com"},"maintainers":[{"name":"beisen","email":"ci@beisen.com"}],"license":"ISC","dependencies":{"aphrodite":"^1.2.1","react":"^0.14.6","react-animations":"^0.1.0","react-dom":"^0.14.6"},"devDependencies":{"babel":"^6.5.2","babel-cli":"^6.6.5","babel-core":"^6.7.2","babel-eslint":"^4.1.3","babel-loader":"^6.2.4","babel-preset-airbnb":"^1.0.1","babel-preset-es2015":"^6.3.13","babel-preset-react":"^6.3.13","babel-preset-stage-0":"^6.5.0","case-sensitive-paths-webpack-plugin":"^1.0.1","css-loader":"^0.23.1","enzyme":"^2.0.0","file-loader":"^0.8.5","gulp":"^3.9.1","gulp-concat":"^2.6.0","gulp-insert":"^0.5.0","gulp-rename":"^1.2.2","gulp-replace":"^0.5.4","gulp-sass":"^2.3.2","jasmine-core":"^2.4.1","json-loader":"^0.5.4","karma":"^0.13.19","karma-babel-preprocessor":"^6.0.1","karma-chrome-launcher":"^0.2.2","karma-jasmine":"^0.3.7","karma-webpack":"^1.7.0","node-sass":"^3.4.2","react-addons-test-utils":"^0.14.7","sass-loader":"^3.2.0","style-loader":"^0.13.0","url-loader":"^0.5.7","webpack":"^1.12.10","webpack-dev-server":"^1.14.0"},"gitHead":"9c81e81a9246bab56077afd8869983b2404c65ed","_id":"@beisen/animation@1.0.2","_shasum":"6d6dd589ac4e9eb2ac7ccc7e8031d001e2562d06","_from":".","_npmVersion":"3.10.9","_nodeVersion":"4.4.1","_npmUser":{"name":"beisen","email":"ci@beisen.com"},"dist":{"shasum":"6d6dd589ac4e9eb2ac7ccc7e8031d001e2562d06","tarball":"https://registry.npmjs.org/@beisen/animation/-/animation-1.0.2.tgz","integrity":"sha512-Xnk+7lmAy13kdeiRTN2HUGMk/z1LFKG0H4HGrA0GQ2BOLaa6600yqnzxvon68N700m1xYU/vXWXp75si7ffm3A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCmouSlzM686JPI7anJUCnAz3gZQDCUje0UOSd7RzXKAiEAhepLKyjJBSM5d7rDQcUCReaKNz6sb5AdO1PGx1WQlak="}]},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animation-1.0.2.tgz_1499939885734_0.40472583868540823"}},"1.0.4":{"name":"@beisen/animation","version":"1.0.4","description":">1.通过js的方式去操作css，并集成了常见的动画效果,动画效果灵感来源于react-animations,demo:http://react-animations.herokuapp.com/。","main":"index.js","scripts":{"build":"npm run build:lib && npm run build:umd && npm run build:story","build:lib":"babel src --out-dir lib","build:umd":"webpack src/index.js dist/index.js --config webpack.config.js","build:story":"babel story --out-dir man","test":"karma start","dev":"webpack-dev-server --progress --colors --config webpack.dev.config.js --public 10.189.1.8","renew":"git checkout-index -f -a --prefix=../$name/ && cp ./.gitignore ../$name"},"keywords":["beisen","react-component","es6","animation"],"repository":{"type":"git","url":"git@gitlab.beisencorp.com:ux-xhbisme/ux-animation.git"},"author":{"name":"xuhaibin","email":"xuhaibin@beisen.com"},"maintainers":[{"name":"beisen","email":"ci@beisen.com"}],"license":"ISC","dependencies":{"aphrodite":"^1.2.1","react":"^0.14.6","react-animations":"^0.1.0","react-dom":"^0.14.6","velocity-animate":"^1.5.0"},"devDependencies":{"babel":"^6.5.2","babel-cli":"^6.6.5","babel-core":"^6.7.2","babel-eslint":"^4.1.3","babel-loader":"^6.2.4","babel-preset-airbnb":"^1.0.1","babel-preset-es2015":"^6.3.13","babel-preset-react":"^6.3.13","babel-preset-stage-0":"^6.5.0","case-sensitive-paths-webpack-plugin":"^1.0.1","css-loader":"^0.23.1","enzyme":"^2.0.0","file-loader":"^0.8.5","gulp":"^3.9.1","gulp-concat":"^2.6.0","gulp-insert":"^0.5.0","gulp-rename":"^1.2.2","gulp-replace":"^0.5.4","gulp-sass":"^2.3.2","jasmine-core":"^2.4.1","json-loader":"^0.5.4","karma":"^0.13.19","karma-babel-preprocessor":"^6.0.1","karma-chrome-launcher":"^0.2.2","karma-jasmine":"^0.3.7","karma-webpack":"^1.7.0","node-sass":"^3.4.2","react-addons-test-utils":"^0.14.7","sass-loader":"^3.2.0","style-loader":"^0.13.0","url-loader":"^0.5.7","webpack":"^1.12.10","webpack-dev-server":"^1.14.0"},"gitHead":"537a5e68872626918dd4e9631b44ba8c50852c26","_id":"@beisen/animation@1.0.4","_shasum":"bef621ec3b36bf44abc83c033089f266d929d3a3","_from":".","_npmVersion":"3.8.3","_nodeVersion":"5.10.1","_npmUser":{"name":"beisen","email":"ci@beisen.com"},"dist":{"shasum":"bef621ec3b36bf44abc83c033089f266d929d3a3","tarball":"https://registry.npmjs.org/@beisen/animation/-/animation-1.0.4.tgz","integrity":"sha512-HEkUAfsWyKlwsvy2c3bjMiHe4BqS64WO1es/teAwXsQE6lmcGw5I/i1I6QCO2QJcC7kxEiKu3eAy6QRc8ZflJA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFIzAmFNTXqzsPZ3h9YPKMoU/mRd7EqPxb+OmRVVlaAyAiEAx4+YGKY2eyM5q5wzGK3/x4RvL8FOf8Z9wveKIodYEZU="}]},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animation-1.0.4.tgz_1503308707167_0.09461796702817082"}},"1.0.5":{"name":"@beisen/animation","version":"1.0.5","description":">1.通过js的方式去操作css，并集成了常见的动画效果,动画效果灵感来源于react-animations,demo:http://react-animations.herokuapp.com/。","main":"index.js","keywords":["beisen","react-component","es6","animation"],"repository":{"type":"git","url":"git@gitlab.beisencorp.com:ux-xhbisme/ux-animation.git"},"author":{"name":"xuhaibin","email":"xuhaibin@beisen.com"},"maintainers":[{"name":"beisen","email":"ci@beisen.com"}],"license":"ISC","scripts":{"start":"dev_server=on webpack-dev-server","build":"webpack","build-prod":"NODE_ENV=production webpack","analysis":"analyzer_server=on yarn run build"},"dependencies":{"aphrodite":"^1.2.1","react-animations":"^0.1.0","velocity-animate":"^1.5.0","react":"^15.6.1","react-dom":"^15.6.1"},"devDependencies":{"@beisen/talent-ui-webpack-config":"^1.1.7","webpack":"^3.0.0","webpack-dev-server":"^2.5.0"},"gitHead":"03b0d59081c7692c5d0c7a4aea7f4b9390f29c8f","_id":"@beisen/animation@1.0.5","_shasum":"2c7784f7e5d32fc3891a8282646473f9bdfe0c08","_from":".","_npmVersion":"3.8.3","_nodeVersion":"5.10.1","_npmUser":{"name":"beisen","email":"ci@beisen.com"},"dist":{"shasum":"2c7784f7e5d32fc3891a8282646473f9bdfe0c08","tarball":"https://registry.npmjs.org/@beisen/animation/-/animation-1.0.5.tgz","integrity":"sha512-xGxhuzGOQ3/P749T9ivjXXiY48MCWXlQHaDrmYIBZxjL2AAyl2yJFCcS7hr/gltIOeI5Rr+kCHA69MFTLo8bsA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBKeMsHXRJl52RmtNti4OJ4yqc6Tl9RUINqxx5d/O9JEAiA4raRG6EP1F4A2P8BdX2vk3GQMyExMWhyoFNUidNEUWA=="}]},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animation-1.0.5.tgz_1503469307116_0.6381296480540186"}},"1.0.6":{"name":"@beisen/animation","version":"1.0.6","description":">1.通过js的方式去操作css，并集成了常见的动画效果,动画效果灵感来源于react-animations,demo:http://react-animations.herokuapp.com/。","main":"index.js","keywords":["beisen","react-component","es6","animation"],"repository":{"type":"git","url":"git@gitlab.beisencorp.com:ux-xhbisme/ux-animation.git"},"author":{"name":"xuhaibin","email":"xuhaibin@beisen.com"},"maintainers":[{"name":"beisen","email":"ci@beisen.com"}],"license":"ISC","dependencies":{"@beisen/talent-ui-dll-foundation":"^1.0.13","aphrodite":"^1.2.1","react-animations":"^0.1.0","velocity-animate":"^1.5.0","react":"^15.6.1","react-dom":"^15.6.1"},"scripts":{"start":"dev_server=on webpack-dev-server","build":"rm -rf dist/* && webpack"},"devDependencies":{"@beisen/talent-ui-component-webpack-config":"^1.0.3","@beisen/talent-ui-webpack-config":"^1.3.0","node-sass":"^4.5.3","url-loader":"^0.5.9","webpack":"^3.2.0","webpack-dev-server":"^2.5.1"},"gitHead":"51d97269d50fb2c1b8de9e88c695c0f08d1fca03","_id":"@beisen/animation@1.0.6","_shasum":"afa97dd64f0c382bc4a03221e50a37bf1038fc8f","_from":".","_npmVersion":"3.8.3","_nodeVersion":"5.10.1","_npmUser":{"name":"beisen","email":"ci@beisen.com"},"dist":{"shasum":"afa97dd64f0c382bc4a03221e50a37bf1038fc8f","tarball":"https://registry.npmjs.org/@beisen/animation/-/animation-1.0.6.tgz","integrity":"sha512-RpAkdSwJmu3bAlixbmtT1LsFnqtaFjoPs6Zzs/Uq5iQYp/M2y+CrjL4a1bWxgsI55ewKUqW4TYboixF8PTwY6Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEVUEelqjQldTgUhizLR8OhcqlMvr54gwXitY+N3obFfAiEAn37wcN6EaOcMwqUtyTZsh7iv6/2SA2+AZSsCt2+HZyg="}]},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animation-1.0.6.tgz_1503471479400_0.5792860384099185"}}},"readme":"# 简介：\n\n>1.通过js的方式去操作css，并集成了常见的动画效果,动画效果灵感来源于react-animations,demo:http://react-animations.herokuapp.com/。\n\n>2.坚持拿来就用的原则，使用方便简单。\n\n>3.支持自定义动画效果，内部采用GPU和浏览器加速，让css动画效果更流畅。\n\n>4.js操作css的好处：既能利用css动画的兼容性，声明式地写动画，汲取了css动画的全部优点，又通过js控制动画流程弥补了css动画的最大不足。\n\n>5.具体例子可以参照example文件夹。\n\n# 使用方式：\n\n## 1.安装：\n\n    npm i @beisen/animation -S\n    \n## 2.引入：\n\n    import Bounce from '@beisen/animation/src/bounce';\n    \nor\n    \n    import {Bounce} from '@beisen/animation';\n    \n## 3.使用\n\n    <Bounce duration='1s' component={()=><div className='demo-item-component' onClick={()=>{this.handleClick(param)}} >bounce</div>} />\n   \n\n# 效果和支持的动画名称可以把项目clone下来\n\n## 1.git clone git@gitlab.beisencorp.com:ux-xhbisme/ux-animation.git\n\n## 2.npm i && npm run dev\n\n## 3.open http://localhost:8080\n\n>demo1\n\n# 特别属性\n\nMerge和animations是需要配合使用的。\n\n**使用时特别注意：两种相反的属性是不可以merge的，例如fadeIn和fadeOut之类。该组件受react-animations包限制，只能合并两种不同的动画**\n\n\n使用方式：\n\n    <Merge duration='1s' mergeAnimations={ [animations.tada,animations.flip] } component={()=><div className='demo-item-component' onClick={()=>{this.handleClick(param)}} >tada&&flip</div>} />\n\n# 启动GPU加速\n\nSpeedUpGPU 和 .speed-up-GPU类名配合使用可启动GPU加速,除了GPU加速之外，在chrome，firefox，opera浏览器下还采用will-change:animation,启用浏览器优化方案。\n\n使用方法：\n\n    import SpeedUpGPU from '@beisen/animation/src/speedUpGPU';\n    <SpeedUpGPU component={()=><div className='div-demo1 speed-up-GPU'>csstest</div>}></SpeedUpGPU>\n\n或\n\n    import '@beisen/animation/src/speedUpGPU.scss'\n    然后给想要GPU的标签元素加上类名 speed-up-GPU 就可以了\n    \n# 自定义动画\n>demo1 的 CreateAnimation 是自定义动画，内部启用GPU加速和浏览器加速。样例代码：\n\n    import CreateAnimation from '@beisen/animation/src/plateform/createAnimation/createAnimation';\n    import React, {Component} from 'react';\n    \n    export default class Demo1 extends Component{\n        getComponent = (param) => {\n            return <div className={'demo-item-component '} onClick={()=>{this.handleClick(param)}} >{param}</div>\n        }\n\n        handleClick = (param) => {\n            this.state[param] = true;\n            this.setState(this.state);\n            setTimeout(()=>{ \n                this.state[param] = false;\n                this.setState(this.state);\n            },1000)\n        }\n        \n        render(){\n            const demoAnimation = {\n                from : {\n                    width:'200px'\n                },\n                to : {\n                    width:'400px'\n                }\n             }\n            return <div className='demo-item'>{ createAnimation ? <CreateAnimation duration='1s' createAnimation={demoAnimation} component={()=>this.getComponent('createAnimation')} /> : this.getComponent('createAnimation') }</div>\n          \n        }\n    }\n","maintainers":[{"email":"ci@beisen.com","name":"beisencorp"}],"time":{"modified":"2022-06-12T15:08:11.944Z","created":"2017-07-12T11:48:59.887Z","1.0.0":"2017-07-12T11:48:59.887Z","1.0.2":"2017-07-13T09:58:05.955Z","1.0.4":"2017-08-21T09:45:07.448Z","1.0.5":"2017-08-23T06:21:47.736Z","1.0.6":"2017-08-23T06:58:00.564Z"},"repository":{"type":"git","url":"git@gitlab.beisencorp.com:ux-xhbisme/ux-animation.git"},"author":{"name":"xuhaibin","email":"xuhaibin@beisen.com"},"license":"ISC","readmeFilename":"README.md","keywords":["beisen","react-component","es6","animation"]}