fix: 'overflow' CSS property being properly set and removed

even when there's no dimensions transitions to be performed on the parent element
before this fix, the 'overflow' property was being set/removed only when
any dimension transition was being applied to parent element

Author: igorMSoares

js-css-animations/animate.js

@@ -9,7 +9,12 @@ import {
   CUSTOM_CSS_PROPERTIES,
 } from './globals.js';
 
-import { initParentResize, endParentResize } from './resize-parent.js';
+import {
+  initParentResize,
+  endParentResize,
+  setOverflowHidden,
+  removeOverflowHidden,
+} from './resize-parent.js';
 
 import {
   removeInlineTransition,
@@ -332,10 +337,12 @@ const isEnabled = element =>
  * @returns True if the element has an iteration CSS property set, False otherwise
  */
 const hasIterationProp = element => {
+  const iterationProperty = element.style.getPropertyValue(
+    PROPERTY_NAMES.iteration
+  );
   return (
-    element.style
-      .getPropertyValue(PROPERTY_NAMES.iteration)
-      .match(/^(infinite|\d+)$/) !== null
+    iterationProperty != '1' &&
+    iterationProperty.match(/^(infinite|\d+)$/) !== null
   );
 };
 
@@ -375,6 +382,8 @@ const endVisibilityToggle = (element, opts) => {
   }
   if (opts.heightTransition || opts.widthTransition)
     endParentResize(element, opts);
+  else if (opts.overflowHidden && element.parentElement)
+    removeOverflowHidden(element.parentElement);
 };
 
 /**
@@ -447,7 +456,8 @@ const animate = (element, action, id, opts = {}) => {
             heightTransition,
             overflowHidden,
           }));
-        }
+        } else if (overflowHidden && element.parentElement)
+          setOverflowHidden(element.parentElement);
       },
       motion: () => {
         currentTransition = getCurrentTransition(element);
@@ -478,6 +488,7 @@ const animate = (element, action, id, opts = {}) => {
           keepSpace,
           widthTransition,
           heightTransition,
+          overflowHidden,
         });
         if (!hasIterationProp(element))
           element.classList.remove(CLASS_NAMES[action][id]);

js-css-animations/resize-parent.js

@@ -127,4 +127,9 @@ const endParentResize = (element, opts) => {
   removeOverflowHidden(parentElement);
 };
 
-export { initParentResize, endParentResize };
+export {
+  initParentResize,
+  endParentResize,
+  setOverflowHidden,
+  removeOverflowHidden,
+};