From 7f39f8c357b3bfadebd13e471b84add3e519666a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 15 Aug 2019 10:08:55 -0400
Subject: [PATCH] perf(animation): improve reliability of reusing animation
 (#19106)

* fix race condition on reset

* fix linter

* fix linter

* remove unneeded pause at end
---
 core/src/utils/animation/animation.ts | 48 ++++++++-------------------
 1 file changed, 14 insertions(+), 34 deletions(-)

diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
index 95a0b15b7e..f3294fdcc1 100644
--- a/core/src/utils/animation/animation.ts
+++ b/core/src/utils/animation/animation.ts
@@ -614,7 +614,6 @@ export const createAnimation = () => {
         const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
         stylesheets.push(stylesheet);
 
-        setStyleProperty(element, 'animation-name', stylesheet.id || null);
         setStyleProperty(element, 'animation-duration', (getDuration() !== undefined) ? `${getDuration()}ms` : null);
         setStyleProperty(element, 'animation-timing-function', getEasing() || null);
         setStyleProperty(element, 'animation-delay', (getDelay() !== undefined) ? `${getDelay()}ms` : null);
@@ -628,6 +627,11 @@ export const createAnimation = () => {
 
         setStyleProperty(element, 'animation-iteration-count', iterationsCount);
         setStyleProperty(element, 'animation-play-state', 'paused');
+
+        setStyleProperty(element, 'animation-name', `${stylesheet.id}-alt`);
+        requestAnimationFrame(() => {
+          setStyleProperty(element, 'animation-name', stylesheet.id || null);
+        });
       }
     });
   };
@@ -794,30 +798,6 @@ export const createAnimation = () => {
     willComplete = shouldComplete;
 
     if (!shouldComplete) {
-      onFinish(() => {
-        pause(false);
-
-        willComplete = true;
-        forceDurationValue = undefined;
-
-        if (supportsWebAnimations) {
-          forceDirectionValue = undefined;
-          forceDelayValue = undefined;
-        } else {
-
-          /**
-           * Parent animations at this point may not have finished
-           */
-          forceDirectionValue = (getDirection() === 'reverse') ? 'normal' : 'reverse';
-          forceDelayValue = 0;
-          update();
-
-          forceDirectionValue = undefined;
-        }
-      }, {
-        oneTime: true
-      });
-
       forceDirectionValue = (getDirection() === 'reverse') ? 'normal' : 'reverse';
 
       if (supportsWebAnimations) {
@@ -828,21 +808,21 @@ export const createAnimation = () => {
         update(false, false);
       }
     } else {
-      onFinish(() => {
-        pause(false);
-
-        forceDurationValue = undefined;
-        forceDelayValue = undefined;
-      }, {
-        oneTime: true
-      });
-
       if (!supportsWebAnimations) {
         forceDelayValue = (step * getDuration()!) * -1;
         update(false, false);
       }
     }
 
+    onFinish(() => {
+      willComplete = true;
+      forceDurationValue = undefined;
+      forceDirectionValue = undefined;
+      forceDelayValue = undefined;
+    }, {
+      oneTime: true
+    });
+
     if (!parentAnimation) {
       play();
     }