Animation performance improvements

Author: owen-m1

src/Animation.js

@@ -1,4 +1,4 @@
-import { getRect, css, isScrolledPast, matrix, isRectEqual, indexOfObject } from './utils.js';
+import { getRect, css, matrix, isRectEqual, indexOfObject } from './utils.js';
 import Sortable from './Sortable.js';
 
 export default function AnimationStateManager() {
@@ -17,7 +17,7 @@ export default function AnimationStateManager() {
 					target: child,
 					rect: getRect(child)
 				});
-				let fromRect = getRect(child);
+				let fromRect = { ...animationStates[animationStates.length - 1].rect };
 
 				// If animating: compensate for current animation
 				if (child.thisAnimationDuration) {
@@ -70,29 +70,6 @@ export default function AnimationStateManager() {
 
 				target.toRect = toRect;
 
-				// If element is scrolled out of view: Do not animate
-				if (
-					(
-						isScrolledPast(target, toRect, 'bottom', 'top') ||
-						isScrolledPast(target, toRect, 'top', 'bottom') ||
-						isScrolledPast(target, toRect, 'right', 'left') ||
-						isScrolledPast(target, toRect, 'left', 'right')
-					) &&
-					(
-						isScrolledPast(target, animatingRect, 'bottom', 'top') ||
-						isScrolledPast(target, animatingRect, 'top', 'bottom') ||
-						isScrolledPast(target, animatingRect, 'right', 'left') ||
-						isScrolledPast(target, animatingRect, 'left', 'right')
-					) &&
-					(
-						isScrolledPast(target, fromRect, 'bottom', 'top') ||
-						isScrolledPast(target, fromRect, 'top', 'bottom') ||
-						isScrolledPast(target, fromRect, 'right', 'left') ||
-						isScrolledPast(target, fromRect, 'left', 'right')
-					)
-				) return;
-
-
 				if (target.thisAnimationDuration) {
 					// Could also check if animatingRect is between fromRect and toRect
 					if (
@@ -120,6 +97,7 @@ export default function AnimationStateManager() {
 					this.animate(
 						target,
 						animatingRect,
+						toRect,
 						time
 					);
 				}
@@ -151,16 +129,15 @@ export default function AnimationStateManager() {
 			animationStates = [];
 		},
 
-		animate(target, prev, duration) {
+		animate(target, currentRect, toRect, duration) {
 			if (duration) {
 				css(target, 'transition', '');
 				css(target, 'transform', '');
-				let currentRect = getRect(target),
-					elMatrix = matrix(this.el),
+				let elMatrix = matrix(this.el),
 					scaleX = elMatrix && elMatrix.a,
 					scaleY = elMatrix && elMatrix.d,
-					translateX = (prev.left - currentRect.left) / (scaleX || 1),
-					translateY = (prev.top - currentRect.top) / (scaleY || 1);
+					translateX = (currentRect.left - toRect.left) / (scaleX || 1),
+					translateY = (currentRect.top - toRect.top) / (scaleY || 1);
 
 				target.animatingX = !!translateX;
 				target.animatingY = !!translateY;

src/Sortable.js

@@ -552,10 +552,10 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 			el = _this.el,
 			options = _this.options,
 			ownerDocument = el.ownerDocument,
-			dragRect = getRect(target),
 			dragStartFn;
 
 		if (target && !dragEl && (target.parentNode === el)) {
+			let dragRect = getRect(target);
 			rootEl = el;
 			dragEl = target;
 			parentEl = dragEl.parentNode;
@@ -1194,7 +1194,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 					differentLevel = dragEl.parentNode !== el,
 					differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical),
 					side1 = vertical ? 'top' : 'left',
-					scrolledPastTop = isScrolledPast(target, null, 'top', 'top') || isScrolledPast(dragEl, null, 'top', 'top'),
+					scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'),
 					scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0;
 
 

src/utils.js

@@ -255,14 +255,13 @@ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoS
 /**
  * Checks if a side of an element is scrolled past a side of its parents
  * @param  {HTMLElement}  el           The element who's side being scrolled out of view is in question
- * @param  {[DOMRect]}    rect         Optional rect of `el` to use
  * @param  {String}       elSide       Side of the element in question ('top', 'left', 'right', 'bottom')
  * @param  {String}       parentSide   Side of the parent in question ('top', 'left', 'right', 'bottom')
  * @return {HTMLElement}               The parent scroll element that the el's side is scrolled past, or null if there is no such element
  */
-function isScrolledPast(el, rect, elSide, parentSide) {
+function isScrolledPast(el, elSide, parentSide) {
 	let parent = getParentAutoScrollElement(el, true),
-		elSideVal = (rect ? rect : getRect(el))[elSide];
+		elSideVal = getRect(el)[elSide];
 
 	/* jshint boss:true */
 	while (parent) {