Skip to content
Permalink
Browse files

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

* add patched zone for animations

* minify raf better
  • Loading branch information...
liamdebeasi committed Sep 26, 2019
1 parent eab0865 commit 8ca97ce42c60429e7cab45c28e0a1fe4b3452fd0
Showing with 28 additions and 11 deletions.
  1. +1 −1 core/src/components/menu/test/basic/index.html
  2. +10 −10 core/src/utils/animation/animation.ts
  3. +17 −0 core/src/utils/helpers.ts
@@ -102,7 +102,7 @@
}
async function openEnd() {
awaitmenuCtrl.open('end');
await menuCtrl.open('end');
}
async function openCustom() {
@@ -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);
});
});
}
};
@@ -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);

0 comments on commit 8ca97ce

Please sign in to comment.
You can’t perform that action at this time.