fix(animation): properly clean up elements (#19210)

* fix destroy method * wrap dom writes in raf * Add comments
ionic-team · Aug 28, 2019 · 93f2064 · 93f2064
1 parent da5d3f0
commit 93f2064
Showing 1 changed file with 22 additions and 13 deletions.
diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
@@ -60,6 +60,10 @@ export const createAnimation = () => {
    * Destroy the animation and all child animations.
    */
   const destroy = () => {
+    childAnimations.forEach(childAnimation => {
+      childAnimation.destroy();
+    });
+
     cleanUp();
 
     elements.length = 0;
@@ -71,10 +75,6 @@ export const createAnimation = () => {
     initialized = false;
     shouldCalculateNumAnimations = true;
 
-    childAnimations.forEach(childAnimation => {
-      childAnimation.destroy();
-    });
-
     return ani;
   };
 
@@ -124,14 +124,16 @@ export const createAnimation = () => {
       webAnimations.length = 0;
     } else {
       elements.forEach(element => {
-        removeStyleProperty(element, 'animation-name');
-        removeStyleProperty(element, 'animation-duration');
-        removeStyleProperty(element, 'animation-timing-function');
-        removeStyleProperty(element, 'animation-iteration-count');
-        removeStyleProperty(element, 'animation-delay');
-        removeStyleProperty(element, 'animation-play-state');
-        removeStyleProperty(element, 'animation-fill-mode');
-        removeStyleProperty(element, 'animation-direction');
+        requestAnimationFrame(() => {
+          removeStyleProperty(element, 'animation-name');
+          removeStyleProperty(element, 'animation-duration');
+          removeStyleProperty(element, 'animation-timing-function');
+          removeStyleProperty(element, 'animation-iteration-count');
+          removeStyleProperty(element, 'animation-delay');
+          removeStyleProperty(element, 'animation-play-state');
+          removeStyleProperty(element, 'animation-fill-mode');
+          removeStyleProperty(element, 'animation-direction');
+        });
       });
     }
   };
@@ -142,7 +144,14 @@ export const createAnimation = () => {
    */
   const cleanUpStyleSheets = () => {
     stylesheets.forEach(stylesheet => {
-      stylesheet.parentNode!.removeChild(stylesheet);
+      /**
+       * When sharing stylesheets, it's possible
+       * for another animation to have already
+       * cleaned up a particular stylesheet
+       */
+      if (stylesheet && stylesheet.parentNode) {
+        stylesheet.parentNode.removeChild(stylesheet);
+      }
     });
 
     stylesheets.length = 0;