perf(animation): avoid ngzone with requestAnimationFrame (#19457)

* add patched zone for animations

* minify raf better

core/src/components/menu/test/basic/index.html

@@ -102,7 +102,7 @@
     }
 
     async  function openEnd() {
-      awaitmenuCtrl.open('end');
+      await menuCtrl.open('end');
     }
 
     async function openCustom() {

core/src/utils/animation/animation.ts

@@ -1,5 +1,7 @@
 // TODO: Add more tests. until then, be sure to manually test menu and swipe to go back/routing transitions
 
+import { raf } from '../helpers';
+
 import { Animation, AnimationDirection, AnimationFill, AnimationOnFinishCallback, AnimationOnFinishOptions } from './animation-interface';
 import { addClassToArray, animationEnd, createKeyframeStylesheet, generateKeyframeName, generateKeyframeRules, removeStyleProperty, setStyleProperty } from './animation-utils';
 
@@ -125,7 +127,7 @@ export const createAnimation = () => {
       webAnimations.length = 0;
     } else {
       elements.forEach(element => {
-        requestAnimationFrame(() => {
+        raf(() => {
           removeStyleProperty(element, 'animation-name');
           removeStyleProperty(element, 'animation-duration');
           removeStyleProperty(element, 'animation-timing-function');
@@ -653,7 +655,7 @@ export const createAnimation = () => {
           setStyleProperty(element, 'animation-name', `${stylesheet.id}-alt`);
         }
 
-        requestAnimationFrame(() => {
+        raf(() => {
           setStyleProperty(element, 'animation-name', stylesheet.id || null);
         });
       }
@@ -734,7 +736,7 @@ export const createAnimation = () => {
 
   const updateCSSAnimation = (toggleAnimationName = true) => {
     elements.forEach(element => {
-      requestAnimationFrame(() => {
+      raf(() => {
         setStyleProperty(element, 'animation-name', keyframeName || null);
         setStyleProperty(element, 'animation-duration', (getDuration() !== undefined) ? `${getDuration()}ms` : null);
         setStyleProperty(element, 'animation-timing-function', getEasing() || null);
@@ -753,7 +755,7 @@ export const createAnimation = () => {
           setStyleProperty(element, 'animation-name', `${keyframeName}-alt`);
         }
 
-        requestAnimationFrame(() => {
+        raf(() => {
           setStyleProperty(element, 'animation-name', keyframeName || null);
         });
       });
@@ -928,7 +930,7 @@ export const createAnimation = () => {
 
     elements.forEach(element => {
       if (_keyframes.length > 0) {
-        requestAnimationFrame(() => {
+        raf(() => {
           setStyleProperty(element, 'animation-play-state', 'running');
         });
       }
@@ -964,12 +966,10 @@ export const createAnimation = () => {
          *
          * TODO: Is there a cleaner way to do this?
          */
-        requestAnimationFrame(() => {
+        raf(() => {
           clearCSSAnimationPlayState();
-          requestAnimationFrame(() => {
+          raf(animationFinish);
-              animationFinish();
+        });
-            });
-          });
       });
     }
   };

core/src/utils/helpers.ts

@@ -2,6 +2,23 @@ import { EventEmitter } from '@stencil/core';
 
 import { Side } from '../interface';
 
+declare const __zone_symbol__requestAnimationFrame: any;
+declare const requestAnimationFrame: any;
+
+/**
+ * Patched version of requestAnimationFrame that avoids ngzone
+ * Use only when you know ngzone should not run
+ */
+export const raf = (h: any) => {
+  if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+    return __zone_symbol__requestAnimationFrame(h);
+  }
+  if (typeof requestAnimationFrame === 'function') {
+    return requestAnimationFrame(h);
+  }
+  return setTimeout(h);
+};
+
 export const rIC = (callback: () => void) => {
   if ('requestIdleCallback' in window) {
     (window as any).requestIdleCallback(callback);