From 7d417154c5f1ba89e0a30084807ff7e164dd6eba Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 29 Oct 2019 15:44:41 -0400
Subject: [PATCH] feat(animation): Animation Identifiers (#19771)

resolves #19550
---
 core/src/utils/animation/animation-interface.ts | 1 +
 core/src/utils/animation/animation.ts           | 8 ++++++--
 core/src/utils/animation/test/basic/index.html  | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/core/src/utils/animation/animation-interface.ts b/core/src/utils/animation/animation-interface.ts
index 063c7a2eaa..3ed04870b1 100644
--- a/core/src/utils/animation/animation-interface.ts
+++ b/core/src/utils/animation/animation-interface.ts
@@ -2,6 +2,7 @@ export interface Animation {
   parentAnimation: Animation | undefined;
   elements: HTMLElement[];
   childAnimations: Animation[];
+  id: string | undefined;
 
   /**
    * Play the animation
diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
index b761e10c75..e065119a23 100644
--- a/core/src/utils/animation/animation.ts
+++ b/core/src/utils/animation/animation.ts
@@ -24,7 +24,7 @@ interface AnimationInternal extends Animation {
   animationFinish(): void;
 }
 
-export const createAnimation = (): Animation => {
+export const createAnimation = (animationId?: string): Animation => {
   let _delay: number | undefined;
   let _duration: number | undefined;
   let _easing: string | undefined;
@@ -32,6 +32,8 @@ export const createAnimation = (): Animation => {
   let _fill: AnimationFill | undefined;
   let _direction: AnimationDirection | undefined;
   let _keyframes: AnimationKeyFrames = [];
+  const id: string | undefined = animationId;
+
   let beforeAddClasses: string[] = [];
   let beforeRemoveClasses: string[] = [];
   let initialized = false;
@@ -533,7 +535,7 @@ export const createAnimation = (): Animation => {
     elements.forEach(element => {
       if (_keyframes.length > 0) {
         const keyframeRules = generateKeyframeRules(_keyframes);
-        keyframeName = generateKeyframeName(keyframeRules);
+        keyframeName = (animationId !== undefined) ? animationId : generateKeyframeName(keyframeRules);
         const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
         stylesheets.push(stylesheet);
 
@@ -564,6 +566,7 @@ export const createAnimation = (): Animation => {
   const initializeWebAnimation = () => {
     elements.forEach(element => {
       const animation = element.animate(_keyframes, {
+        id,
         delay: getDelay(),
         duration: getDuration(),
         easing: getEasing(),
@@ -957,6 +960,7 @@ export const createAnimation = (): Animation => {
     parentAnimation,
     elements,
     childAnimations,
+    id,
     animationFinish,
     from,
     to,
diff --git a/core/src/utils/animation/test/basic/index.html b/core/src/utils/animation/test/basic/index.html
index a03a3776b9..364fb2ef18 100644
--- a/core/src/utils/animation/test/basic/index.html
+++ b/core/src/utils/animation/test/basic/index.html
@@ -21,7 +21,7 @@
 
     const squareA = document.querySelector('.square-a');
     
-    const rootAnimation = createAnimation();
+    const rootAnimation = createAnimation('root-animation-id');
     
     rootAnimation
       .addElement(squareA)