Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
universal-transition
Advanced tools
universal-transition - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1-beta.1
@@ -1,77 +0,2 @@ | ||
| import {default as React, ReactNode} from "react"; | ||
| /** | ||
| * Gradient animation(渐变动画) | ||
| * document address(文档地址)： | ||
| * https://alibaba.github.io/rax/component/transition | ||
| * reference document(参考文档):https://weex.apache.org/cn/references/modules/animation.html | ||
| */ | ||
| /** | ||
| * describes the speed curve that the animation performs to make the animation change smoother | ||
| * (描述动画执行的速度曲线，用于使动画变化更为平滑) | ||
| * | ||
| * linear: | ||
| * ease: | ||
| * slower animation speed | ||
| * (动画速度逐渐变慢) | ||
| * ease-in: | ||
| * animation speed from | ||
| * The speed of the animation is the same from beginning to end | ||
| * (动画从头到尾的速度是相同的)slow to fast | ||
| * (动画速度由慢到快) | ||
| * ease-out: | ||
| * animation speed from fast to slow | ||
| * (动画速度由快到慢) | ||
| * ease-in-out: | ||
| * animation accelerates to the middle point and decelerates to the end | ||
| * (动画先加速到达中间点后减速到达终点) | ||
| * cubic-bezier(x1, y1, x2, y2): | ||
| * The change process is defined in the cubic Bessel function. The parameter value of the function must be between 0 and 1 | ||
| * (在三次贝塞尔函数中定义变化过程，函数的参数值必须处于 0 到 1 之间) | ||
| */ | ||
| export type TimingFunctionType = | ||
| "linear" | ||
| | "ease" | ||
| | "ease-in" | ||
| | "ease-out" | ||
| | "ease-in-out" | ||
| | "cubic-bezier(x1, y1, x2, y2)" | ||
| export interface TransitionOptions { | ||
| /** | ||
| * Specifies the duration of the animation (in milliseconds). The default value is 0, which means there is no animation | ||
| * (指定动画的持续时间 (单位是毫秒)，默认值是 0，表示没有动画效果。) | ||
| */ | ||
| duration: number; | ||
| /** | ||
| * describes the speed curve that the animation performs to make the animation change smoother | ||
| * (描述动画执行的速度曲线，用于使动画变化更为平滑) | ||
| * default(默认值)：linear | ||
| */ | ||
| timingFunction?: TimingFunctionType; | ||
| /** | ||
| * whether or not to generate a layout animation when the reference node animation is executed is LayoutAnimation | ||
| * (节点动画执行时是否产生布局动画即LayoutAnimation) | ||
| * default(默认值)：false | ||
| */ | ||
| needLayout?: boolean; | ||
| /** | ||
| * specifies the time interval (in milliseconds) between the request animation operation and the execution of the animation. | ||
| * The default value is 0, which means there is no delay and the animation is executed immediately after the request. | ||
| * (指定请求动画操作到执行动画之间的时间间隔 (单位是毫秒)，默认值是 0，表示没有延迟，在请求后立即执行动画) | ||
| * default(默认值)：0 | ||
| */ | ||
| delay: number; | ||
| } | ||
| export default function transition(node: ReactNode | Array<ReactNode>, styles: React.CSSProperties, option: TransitionOptions, callback?: () => void): void; | ||
| declare let transition: any; | ||
| export default transition; |
123
lib/index.js
| "use strict"; | ||
| exports.__esModule = true; | ||
| exports.default = transition; | ||
| exports.default = void 0; | ||
| var _universalEnv = require("universal-env"); | ||
| var _styleUnit = require("style-unit"); | ||
| var _web = _interopRequireDefault(require("./web")); | ||
| function parseTransform(transformValue) { | ||
| var keyValueMap = {}; | ||
| var _weex = _interopRequireDefault(require("./weex")); | ||
| if (!transformValue || transformValue.length < 1) { | ||
| return keyValueMap; | ||
| } | ||
| var _ali = _interopRequireDefault(require("./miniapp/ali")); | ||
| var functionList = transformValue.match(/\w+\(.+?\)/g); | ||
| var _wechat = _interopRequireDefault(require("./miniapp/wechat")); | ||
| if (functionList) { | ||
| functionList.forEach(function (functionString) { | ||
| var functionArray = functionString.match(/(\w+)\((.+?)\)/); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| if (functionArray && functionArray.length === 3) { | ||
| keyValueMap[functionArray[1]] = functionArray[2].replace('deg', '').split(','); | ||
| } | ||
| }); | ||
| } | ||
| var transition = function () {}; | ||
| return keyValueMap; | ||
| if (_universalEnv.isWeb) { | ||
| transition = _web.default; | ||
| } | ||
| function transition(node, styles, options, callback) { | ||
| if (!node && !_universalEnv.isMiniApp) return; | ||
| if (_universalEnv.isWeex) { | ||
| transition = _weex.default; | ||
| } | ||
| if (typeof options == 'function' || options == null) { | ||
| callback = options; | ||
| options = { | ||
| timingFunction: 'ease', | ||
| duration: 0, | ||
| delay: 0 | ||
| }; | ||
| } | ||
| if (_universalEnv.isMiniApp) { | ||
| transition = _ali.default; | ||
| } | ||
| for (var prop in styles) { | ||
| styles[prop] = (0, _styleUnit.convertUnit)(styles[prop], prop); | ||
| } | ||
| if (_universalEnv.isWeChatMiniprogram) { | ||
| transition = _wechat.default; | ||
| } | ||
| if (_universalEnv.isWeex) { | ||
| var animation = __weex_require__('@weex-module/animation'); | ||
| animation.transition(node.ref, { | ||
| styles: styles, | ||
| timingFunction: options.timingFunction || 'ease', | ||
| delay: options.delay || 0, | ||
| duration: options.duration || 0, | ||
| needLayout: options.needLayout || false | ||
| }, callback || function () {}); | ||
| } else if (_universalEnv.isMiniApp) { | ||
| // eslint-disable-next-line no-undef | ||
| var _animation = my.createAnimation(Object.assign({}, options, { | ||
| timeFunction: options.timingFunction || 'ease' | ||
| })); | ||
| var properties = Object.keys(styles); | ||
| properties.map(function (property) { | ||
| if (_animation[property]) { | ||
| _animation = _animation[property](styles[property]); | ||
| } | ||
| if (property === 'transform') { | ||
| var transformList = parseTransform(styles[property]); | ||
| Object.keys(transformList).forEach(function (key) { | ||
| if (_animation[key]) { | ||
| var _animation2; | ||
| _animation = (_animation2 = _animation)[key].apply(_animation2, transformList[key]); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| return { | ||
| export: function _export() { | ||
| return _animation.step().export(); | ||
| } | ||
| }; | ||
| } else if (_universalEnv.isWeb) { | ||
| var _properties = Object.keys(styles); | ||
| var duration = options.duration || 0; // ms | ||
| var timingFunction = options.timingFunction || 'ease'; | ||
| var delay = options.delay || 0; // ms | ||
| var transitionValue = _properties.length ? _properties.map(function (property) { | ||
| return property + " " + duration + "ms " + timingFunction + " " + delay + "ms"; | ||
| }).join(',') : "all " + duration + "ms " + timingFunction + " " + delay + "ms"; | ||
| node.style.transition = transitionValue; | ||
| node.style.webkitTransition = transitionValue; | ||
| if (callback) { | ||
| var transitionEndHandler = function transitionEndHandler(e) { | ||
| e.stopPropagation(); | ||
| node.removeEventListener('webkitTransitionEnd', transitionEndHandler); | ||
| node.removeEventListener('transitionend', transitionEndHandler); | ||
| node.style.transition = ''; | ||
| node.style.webkitTransition = ''; | ||
| callback(); | ||
| }; | ||
| node.addEventListener('webkitTransitionEnd', transitionEndHandler); | ||
| node.addEventListener('transitionend', transitionEndHandler); | ||
| } | ||
| for (var key in styles) { | ||
| // TODO add vendor prefix | ||
| var value = styles[key]; | ||
| node.style[key] = value; | ||
| } | ||
| } | ||
| } | ||
| var _default = transition; | ||
| exports.default = _default; |
| { | ||
| "name": "universal-transition", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1-beta.1", | ||
| "description": "A universal transition API.", | ||
@@ -8,6 +8,6 @@ "license": "BSD-3-Clause", | ||
| "scripts": { | ||
| "start": "rax-scripts start --type 'component' -p 8000", | ||
| "build": "rax-scripts build --type 'component'", | ||
| "start": "rax-scripts start", | ||
| "build": "rax-scripts build", | ||
| "test": "rax-scripts test", | ||
| "lint": "eslint --ext .js --ext .jsx ./src", | ||
| "lint": "eslint --ext .js --ext .jsx --ext .ts --ext .tsx ./src", | ||
| "prebuild": "npm run lint && npm run test", | ||
@@ -21,16 +21,18 @@ "prepublish": "npm run build" | ||
| "type": "git", | ||
| "url": "git+https://github.com/raxjs/universal-transition.git" | ||
| "url": "https://github.com/raxjs/universal-api.git" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/alibaba/rax/issues" | ||
| "url": "https://github.com/raxjs/universal-api/issues" | ||
| }, | ||
| "homepage": "https://github.com/alibaba/rax#readme", | ||
| "homepage": "https://github.com/raxjs/universal-api#readme", | ||
| "dependencies": { | ||
| "style-unit": "^0.6.5", | ||
| "universal-env": "^1.0.1" | ||
| "style-unit": "^2.0.0", | ||
| "universal-env": "^2.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/jest": "^24.0.18", | ||
| "@typescript-eslint/eslint-plugin": "^1.7.0", | ||
| "@typescript-eslint/parser": "^1.7.0", | ||
| "babel-eslint": "^10.0.2", | ||
| "debug": "^4.1.1", | ||
| "eslint": "^6.1.0", | ||
| "eslint": "5.15.1", | ||
| "eslint-config-rax": "^0.0.0", | ||
@@ -40,4 +42,5 @@ "eslint-plugin-import": "^2.18.2", | ||
| "pre-commit": "^1.2.2", | ||
| "rax": "0.6.7", | ||
| "rax-scripts": "^1.3.10" | ||
| "rax": "^1.0.8", | ||
| "rax-plugin-component": "^0.1.9", | ||
| "rax-scripts": "^2.0.0" | ||
| }, | ||
@@ -44,0 +47,0 @@ "pre-commit": [ |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by10.41%
27768
- Number of package files
- increased by115.38%
28
- Lines of code
- increased by36.36%
570
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Dev dependency count
- increased by33.33%
12
- Number of low quality alerts
- increased byInfinity%
1
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedstyle-unit@2.0.1(transitive)
+ Addeduniversal-env@2.0.0(transitive)
- Removedstyle-unit@0.6.5(transitive)
- Removeduniversal-env@1.0.7(transitive)
Updatedstyle-unit@^2.0.0
Updateduniversal-env@^2.0.0