{"bugs":{"url":"https://github.com/raxjs/universal-api/issues"},"dist":{"shasum":"0d6d36beb204d3114951a9101c74d6f27bff4106","tarball":"https://registry.npmjs.org/universal-transition/-/universal-transition-1.0.1-beta.2.tgz","fileCount":28,"integrity":"sha512-gVjDzd6hF5UXcwRyUf8plTkbbubsb//Phey+CbkAhMeniz48dc/qOfZBGdmMI+xxZTKNL3rMwf0Cew2KvjoXmw==","signatures":[{"sig":"MEUCIQD9vlQHH2oKYntB6SkDB9xDZ/us9Z+N2DIjlPARU3W+DQIgEGrIgbndBCwJ4dvA0XL5RG8R4Zbv7B9qIedurPRPor0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdv8wUCRA9TVsSAnZWagAAU+YQAJ44ESZfpkAFiEYvOgJg\na8mUr50UhyrJl26d9cNbifcZbKwXGe/h3xahhldO3XmpIM7MW37JoO14PEEJ\nGurIBMoOfXVgtseGtYY/wpa2h0EF9SXhzcYAps6ELW/bvqqbhOQoayCy7isO\nSI0R7BQ5xzI5SdJhl6sDWc+bzc1HGR6dfgRvu24+rarQ6PKaVajSq4Of4Eo7\nnCWnp9p4gATlDGyNXdFvECbd76EZsWlBwtXa4Sl779+uW4e65MGmgs3skKp+\nEUQYVGgnf/3QKH2XMreIP16gghK8DfNHGEuT9zOlXORPNAnfwQJJk4GaN3Uu\nuKweZjIk0OPwRbQVmiEcXx3tc6jsP3qpExTEsGreuGXuLwUGwPIK5EFtZe7X\nJF4VI6oLRCbPbUHx6gkqMG7rCoe1HB3/aek9BqkXD+GSVAZjXs8voJnNaMXL\nBnp51Btj6r/g8RkFePY6ptb14VzjwGbwTOecfYjgaNDlM08BZUyKLI2Nyc+k\ntQnt/yQy27BkONkrwxZ8WUF+bfUVNoaelqD3QxShERo3F3eBneqbv1Meqym5\nShc2Tu/GvcDDla4bLmZgIIHNvc9XDxyq/7rqowdC37nmNIw/waEyef8HzrL6\nrhuSIAyq85mvbUHtr6cjG7OMrE5JidEZGnwXiE8bi9EUgI0ss9hWhxKgF3Uy\nza/G\r\n=Clh6\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## 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## 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```","license":"BSD-3-Clause","scripts":{"lint":"eslint --ext .js --ext .jsx --ext .ts --ext .tsx ./src","test":"rax-scripts test","build":"rax-scripts build","start":"rax-scripts start","prebuild":"npm run lint && npm run test","prepublish":"npm run build"},"_npmUser":{"name":"balloonzzq","email":"zqzhuang888@qq.com"},"homepage":"https://github.com/raxjs/universal-api#readme","keywords":["universal"],"pre-commit":["lint","test"],"repository":{"url":"git+https://github.com/raxjs/universal-api.git","type":"git"},"_npmVersion":"6.10.1","description":"A universal transition API.","directories":{},"maintainers":[{"name":"balloonzzq","email":"zqzhuang888@qq.com"},{"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":"9.11.1","dependencies":{"style-unit":"^2.0.0","universal-env":"^2.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"rax":"^1.0.8","eslint":"5.15.1","pre-commit":"^1.2.2","@types/jest":"^24.0.18","rax-scripts":"^2.0.0","babel-eslint":"^10.0.2","eslint-config-rax":"^0.0.0","eslint-plugin-react":"^7.12.4","eslint-plugin-import":"^2.18.2","rax-plugin-component":"^0.1.9","@typescript-eslint/parser":"^1.7.0","@typescript-eslint/eslint-plugin":"^1.7.0"},"_npmOperationalInternal":{"tmp":"tmp/universal-transition_1.0.1-beta.2_1572850708476_0.8919239062377495","host":"s3://npm-registry-packages"},"_id":"universal-transition@1.0.1-beta.2","version":"1.0.1-beta.2"}