[ui-utils] Stop CSS animation on cancel

If the animation is started and then the element is hidden, the
animation will restart once the element is visible again. IMO the
animation should never restart for `runCSSAnimationOnce`.

Bug: None
Change-Id: I80f119fdc7cef414989fad363ed8d31428de76af
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5952312
Commit-Queue: Alina Varkki <[email protected]>
Reviewed-by: Alina Varkki <[email protected]>
Auto-Submit: Adam Raine <[email protected]>

Author: Adam Raine

front_end/ui/legacy/UIUtils.ts

@@ -690,13 +690,15 @@ export function runCSSAnimationOnce(element: Element, className: string): void {
   function animationEndCallback(): void {
     element.classList.remove(className);
     element.removeEventListener('webkitAnimationEnd', animationEndCallback, false);
+    element.removeEventListener('animationcancel', animationEndCallback, false);
   }
 
   if (element.classList.contains(className)) {
     element.classList.remove(className);
   }
 
   element.addEventListener('webkitAnimationEnd', animationEndCallback, false);
+  element.addEventListener('animationcancel', animationEndCallback, false);
   element.classList.add(className);
 }