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

* fix destroy method

* wrap dom writes in raf

* Add comments

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,6 +124,7 @@ export const createAnimation = () => {
       webAnimations.length = 0;
     } else {
       elements.forEach(element => {
+        requestAnimationFrame(() => {
           removeStyleProperty(element, 'animation-name');
           removeStyleProperty(element, 'animation-duration');
           removeStyleProperty(element, 'animation-timing-function');
@@ -133,6 +134,7 @@ export const createAnimation = () => {
           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;