{"bugs":{"url":"https://github.com/alibaba/rax/issues"},"dist":{"shasum":"5fc0ef762090b01b379d81eb47332c25f95f5b98","tarball":"https://registry.npmjs.org/universal-transition/-/universal-transition-1.0.0-beta.1.tgz","fileCount":17,"integrity":"sha512-LdJhR14RzTxQR8JvvaQrFlTgdxIG+KIMrqml3yYcF7VZ6rp5QFxKdO7it1Mb5JrNDKEGCkHy86+Z8AdoP7desw==","signatures":[{"sig":"MEUCIQCsB6a8f+jNuPAZgU6SWqHPNjuXGg2eDdROTd5EQ9+7wQIgZ9ZyLqDqbPTsOQx0KXXCM1E5MBtLUmg2e5F1l7W8E1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/5oPCRA9TVsSAnZWagAAa5sQAJZs/qgi2DbNVH+xkV1o\nscmuoxl40t4ZNLQ+mMOFEIqid2dS3zkt0X1yi+nmzNSW6Snmf5/CRwdgzruJ\n0gCXr1u5/eXqyAdKfIoIZSn1am3rdXNV7a5+71xm7hXYbLX8lvq8h1tmUTEI\n1gXUhL2TuRxVtFU2/yeCJWPDCgSXul9jc6y45PVcRxM6N2shZIA5/Sn5Z5qh\n6GFx0RA8dxWOFMxzc9aghsfFylaVz4B4C0XSkM6X++TU+Djoqbr/T0/1hxlx\nJMdtzUe5CTSSD4v1g8u2pt3WjfJxjUTZbVr6AYbnrJlah/21YMZdFDDV7zmB\n5ds4t3tqRmIMqDSCw/ZZqCMJENRvLDcwxesZ/FyUJ4p5RQ6ukNnyKTHnAxGp\n9lw9w28DSX5UfxWNTWE48SR7PluooHjDQKDvxaVkCCYNHtJuoPi8RSTANT/S\n6EweVKFbp7rjxCIWj5yWeSKauLom3gXZ/GphkCcmgoRffT1TTM+ShoFIFvcA\nsMJH5fqS6lLT7gNTT8FEGAUyWMRoZ4VrwmThTzZPDZtqxJh4L/Lqpc4x7nm7\nmViNVSMJiAK7FkLVexwtdodctIFlYWnaKOQH1+wCUJr+ZKDQ2suMwVOe4b5l\nIKNCSm4P/KeIxbFzOclcuH+HYg87saPUwIzbWP9/Miiu2u1Y6TJJJsk9JObT\nZ10X\r\n=nGC4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"universal-transition","readme":"# universal-transition [![npm](https://img.shields.io/npm/v/universal-transition.svg)](https://www.npmjs.com/package/universal-transition)\n\nUsed to create transition animation.\n\n## Install\n\n```bash\n$ npm install universal-transition --save\n```\n\n## Usage\n\n```js\nimport transition from 'universal-transition';\n\ntransition(document.querySelector('#box'), {\n  transform: 'translate(10px, 20px) scale(1.5, 1.5) rotate(90deg)',\n  opacity: '0.5'\n}, {\n  timingFunction: 'ease',\n  delay: 0,\n  duration: 1000\n}, function() {\n  console.log('animation end');\n});\n```\n\n## Methods\n\n### `transition(domNode, styles, options, callback)`\n\n#### Supported\n\n<img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" />\n\n#### Arguments\n\n| Property | Type | Description | Required | Default | Supported |\n| --- | --- | --- | --- | --- |  --- |\n| domNode | `DOMNode`  | Specified element，mini app does not support，see below for details[mini app instructions] | yes | - |  <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> |\n| styles | `object`  | See below for details | yes | - |   |\n| options | `Object`  | options，See below for details | no | - |   |\n| callback | `function`  |  Triggered after the animation is complete，mini app does not support | no | - | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> |\n\nThe properties listed below are supported for each environment, and the properties not listed are not guaranteed for each environment.\n\nstyles supported attributes and situation description：\n\n| Property | Type | Description | Default |\n| --- | --- | --- | --- |\n| styles.backgroundColor |  `color` | background color | - |\n| styles.height | `length` | Length value | - |\n| styles.width | `length` | Length value | - |\n| styles.opacity | `number` | Opacity 0-1 | - |\n| styles.transform | `string` | transform type，see below for details | - |\n\nstyles.transform supported attributes：\n\n| Property | Type | Description | Default |\n| --- | --- | --- | --- |\n| translate、translateX、translateY | `number | percentage` | Specify where the element is moved to | 0 |\n| rotate、rotateX、rotateY | `angle` | Specifies the angle at which the element is deflected | 0 |\n| scale、scaleX、scaleY| `number` | Specify multiples of zoomed in and out elements | 1 |\n\noptions：\n\n| Property | Type | Description | Default |\n| --- | --- | --- | --- |\n| options.timingFunction |  `string` | Animation effect，valid values are：\"linear\",\"ease\",\"ease-in\",\"ease-in-out\",\"ease-out\"(Unlisted values, there may be compatibility issues) | ease |\n| options.delay |  `number` | Animation delay time | 0 |\n| options.duration |  `number` | Animation duration | 0 |\n\n#### Return\n\nMini app return `export()`，other cases return `undefined`\n\n## Mini app instructions：\n\nBecause the mini app can't provide `DOMNode`, and use animation way is different. So the mini app needs to get the animation content by the `export()` method and then manually bind to the element.\n\n### Usage\n\n```html\n<view animation=\"{{transitionInfo}}\"></view>\n```\n```javascript\nPage({\n  data: {\n    transitionInfo: null,\n  },\n  onShow(){\n    const transitionInfo = transition(null, {\n      transform: 'translate(10px, 20px) scale(1.5, 1.5) rotate(90deg)',\n      opacity: '0.5'\n    }, {\n      timingFunction: 'ease',\n      delay: 0,\n      duration: 1000\n    });\n\n    this.setData({\n      transitionInfo: transitionInfo.export()\n    });\n  }\n})\n```","gitHead":"7d0696a9fe2326f7b7eb2088b4685947cdc41c42","license":"BSD-3-Clause","scripts":{"lint":"eslint --ext .js --ext .jsx ./src","test":"jest","build":"rax-scripts build --type 'component'","start":"rax-scripts start --type 'component' -p 8000","prebuild":"npm run lint && npm run test","prepublish":"npm run build"},"_npmUser":{"name":"ggice","email":"309683593@qq.com"},"homepage":"https://github.com/alibaba/rax#readme","keywords":["universal"],"pre-commit":["lint","test"],"repository":{"url":"git+https://github.com/raxjs/universal-transition.git","type":"git"},"_npmVersion":"6.4.1","description":"A universal transition API.","directories":{},"maintainers":[{"name":"wintercn","email":"csf178@gmail.com"},{"name":"yacheng","email":"narutosun2@163.com"},{"name":"yuanyan","email":"yuanyan.cao@gmail.com"},{"name":"zeroling","email":"wssgcg1213@qq.com"}],"_nodeVersion":"10.15.3","dependencies":{"style-unit":"^0.6.5","universal-env":"1.0.0-beta.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"rax":"0.6.7","jest":"^24.7.1","eslint":"^5.16.0","babel-jest":"^24.7.1","pre-commit":"^1.2.2","@babel/core":"^7.4.3","rax-scripts":"^1.2.1","babel-eslint":"10.0.1","@babel/preset-env":"^7.4.3","eslint-plugin-react":"^7.12.4","eslint-plugin-import":"^2.17.2","jest-localstorage-mock":"^2.3.0"},"_npmOperationalInternal":{"tmp":"tmp/universal-transition_1.0.0-beta.1_1560254990645_0.7794064991658025","host":"s3://npm-registry-packages"},"_id":"universal-transition@1.0.0-beta.1","version":"1.0.0-beta.1"}