diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html index d8a249a7f5..0cac916ea3 100644 --- a/core/src/components/menu/test/basic/index.html +++ b/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() { diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts index 0a43a2c0b5..3b9201e5df 100644 --- a/core/src/utils/animation/animation.ts +++ b/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(() => { - animationFinish(); - }); - }); + raf(animationFinish); + }); }); } }; diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts index 29d0ecbd05..f0c87309a0 100644 --- a/core/src/utils/helpers.ts +++ b/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);