fix: Fixed SwappablePlugin style on undefined element error

Author: manjumjn

.vscode/settings.json

@@ -18,7 +18,7 @@
   },
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "javascript.validate.enable": false,
   "eslint.validate": ["javascript"]

package.json

@@ -93,5 +93,6 @@
     "last 3 chromeandroid versions",
     "last 1 firefoxandroid versions",
     "ios >= 13.4"
-  ]
+  ],
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/Plugins/SwapAnimation/SwapAnimation.ts

@@ -121,24 +121,33 @@ function animate(
   {duration, easingFunction, horizontal}: Options,
 ) {
   for (const element of [from, to]) {
-    element.style.pointerEvents = 'none';
+    if (!element || !element.style) {
+      // eslint-disable-next-line no-console
+      console.warn('Element is not HTMLElement', element);
+    }
+    if (element && element.style) {
+      element.style.pointerEvents = 'none';
+    }
   }
-
-  if (horizontal) {
-    const width = from.offsetWidth;
-    from.style.transform = `translate3d(${width}px, 0, 0)`;
-    to.style.transform = `translate3d(-${width}px, 0, 0)`;
-  } else {
-    const height = from.offsetHeight;
-    from.style.transform = `translate3d(0, ${height}px, 0)`;
-    to.style.transform = `translate3d(0, -${height}px, 0)`;
+  if (from && to && from.style && to.style) {
+    if (horizontal) {
+      const width = from.offsetWidth;
+      from.style.transform = `translate3d(${width}px, 0, 0)`;
+      to.style.transform = `translate3d(-${width}px, 0, 0)`;
+    } else {
+      const height = from.offsetHeight;
+      from.style.transform = `translate3d(0, ${height}px, 0)`;
+      to.style.transform = `translate3d(0, -${height}px, 0)`;
+    }
   }
 
   requestAnimationFrame(() => {
     for (const element of [from, to]) {
-      element.addEventListener('transitionend', resetElementOnTransitionEnd);
-      element.style.transition = `transform ${duration}ms ${easingFunction}`;
-      element.style.transform = '';
+      if (element && element.style && element.addEventListener) {
+        element.addEventListener('transitionend', resetElementOnTransitionEnd);
+        element.style.transition = `transform ${duration}ms ${easingFunction}`;
+        element.style.transform = '';
+      }
     }
   });
 }