Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@nx-js/animate-middleware
Advanced tools
@nx-js/animate-middleware - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
@@ -6,3 +6,2 @@ 'use strict' | ||
| leaving: Symbol('during leaving animation'), | ||
| moveTransition: Symbol('watch move transition'), | ||
| position: Symbol('animated element position'), | ||
@@ -12,3 +11,3 @@ parent: Symbol('parent node of leaving node'), | ||
| } | ||
| const watchedNodes = new Set() | ||
| const watchedNodes = new Map() | ||
| let checkQueued = false | ||
@@ -57,10 +56,19 @@ | ||
| if (!this[secret.parent]) { | ||
| watchedNodes.add(this) | ||
| this.$cleanup(unwatch) | ||
| this[secret.parent] = this.parentNode | ||
| this.$cleanup(onLeave, animation) | ||
| this[secret.parent] = this.parentNode | ||
| registerListener(this) | ||
| } | ||
| getPosition(this) | ||
| registerListener(this) | ||
| } | ||
| function getPosition (node) { | ||
| let position = watchedNodes.get(node) | ||
| if (!position) { | ||
| position = {} | ||
| watchedNodes.set(node, position) | ||
| node.$cleanup(unwatch) | ||
| } | ||
| return position | ||
| } | ||
| function registerListener (elem) { | ||
@@ -91,7 +99,5 @@ const root = elem.$root | ||
| function moveAttribute (transition) { | ||
| if (!this[secret.moveTransition]) { | ||
| watchedNodes.add(this) | ||
| this.$cleanup(unwatch) | ||
| this[secret.moveTransition] = true | ||
| } | ||
| const position = getPosition(this) | ||
| position.move = true | ||
| if (typeof transition === 'object' && transition) { | ||
@@ -116,2 +122,3 @@ transition = 'transform ' + transitionObjectToString(transition) | ||
| requestAnimationFrame(checkWatchedNodes) | ||
| requestAnimationFrame(moveWatchedNodes) | ||
| } | ||
@@ -121,30 +128,36 @@ } | ||
| function checkWatchedNodes () { | ||
| for (let elem of watchedNodes) { | ||
| const position = { | ||
| left: elem.offsetLeft, | ||
| top: elem.offsetTop | ||
| } | ||
| const prevPosition = elem[secret.position] || {} | ||
| elem[secret.position] = position | ||
| const xDiff = (prevPosition.left - position.left) || 0 | ||
| const yDiff = (prevPosition.top - position.top) || 0 | ||
| if (elem[secret.moveTransition] && (xDiff || yDiff)) { | ||
| onMove(elem, xDiff, yDiff) | ||
| } | ||
| } | ||
| watchedNodes.forEach(checkWatchedNode) | ||
| checkQueued = false | ||
| } | ||
| function onMove (elem, xDiff, yDiff) { | ||
| const style = elem.style | ||
| const transition = style.transition | ||
| style.transition = '' | ||
| style.transform = `translate3d(${xDiff}px, ${yDiff}px, 0)` | ||
| requestAnimationFrame(() => { | ||
| style.transition = transition | ||
| style.transform = '' | ||
| }) | ||
| function checkWatchedNode (position, node) { | ||
| const prevTop = position.top | ||
| const prevLeft = position.left | ||
| position.top = node.offsetTop | ||
| position.left = node.offsetLeft | ||
| position.height = node.offsetHeight | ||
| position.width = node.offsetWidth + 1 | ||
| position.xDiff = (prevLeft - position.left) || 0 | ||
| position.yDiff = (prevTop - position.top) || 0 | ||
| } | ||
| function moveWatchedNodes () { | ||
| watchedNodes.forEach(moveWatchedNode) | ||
| } | ||
| function moveWatchedNode (position, node) { | ||
| if (position.move) { | ||
| const style = node.style | ||
| const transition = style.transition | ||
| style.transition = '' | ||
| style.transform = `translate(${position.xDiff}px, ${position.yDiff}px)` | ||
| requestAnimationFrame(() => { | ||
| style.transition = transition | ||
| style.transform = '' | ||
| }) | ||
| } | ||
| } | ||
| function animationObjectToString (animation) { | ||
@@ -202,9 +215,9 @@ return [ | ||
| const style = elem.style | ||
| const position = elem[secret.position] | ||
| style.left = `${position.left}px` | ||
| style.top = `${position.top}px` | ||
| const position = watchedNodes.get(elem) | ||
| style.top = style.top || `${position.top}px` | ||
| style.left = style.left || `${position.left}px` | ||
| style.width = `${position.width}px` | ||
| style.height = `${position.height}px` | ||
| style.margin = '0' | ||
| style.width = '-moz-max-content' | ||
| style.width = '-webkit-max-content' | ||
| style.width = 'max-content' | ||
| style.boxSizing = 'border-box' | ||
| style.position = 'absolute' | ||
@@ -211,0 +224,0 @@ } |
| { | ||
| "name": "@nx-js/animate-middleware", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1", | ||
| "description": "An NX animation middleware, based on standrad CSS animations.", | ||
@@ -25,4 +25,4 @@ "main": "animate.js", | ||
| "peerDependencies": { | ||
| "@nx-js/attributes-middleware": "^1.0.0" | ||
| "@nx-js/attributes-middleware": "^1.1.0" | ||
| } | ||
| } |
@@ -8,6 +8,5 @@ # The animate middleware | ||
| - all middleware dependencies: [observe](https://github.com/nx-js/observe-middleware), [attributes](https://github.com/nx-js/attributes-middleware) | ||
| - processes: element nodes | ||
| - throws on: nothing | ||
| - use as: component or content middleware | ||
| - [docs](http://nx-framework/docs/middlewares/animate) | ||
| - type: component or content middleware | ||
| - ignores: text nodes | ||
| - [docs](http://nx-framework.com/docs/middlewares/animate) | ||
@@ -14,0 +13,0 @@ ## Installation |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.23%
9031
- Lines of code
- increased by4.26%
196
Worsened metrics
- Number of lines in readme file
- decreased by-2.7%
36
No dependency changes