From 93f206492775ad5ebd33dc092167a375edd6392e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 28 Aug 2019 12:01:29 -0400
Subject: [PATCH] fix(animation): properly clean up elements (#19210)

* fix destroy method

* wrap dom writes in raf

* Add comments
---
 core/src/utils/animation/animation.ts | 35 +++++++++++++++++----------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
index 0f6b016059..b7a769a8da 100644
--- 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;