javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(animations): wrap loops in requestAnimationFrame call (#19630)

Browse Source 
fixes #19629
This commit is contained in:
Liam DeBeasi
2019-10-11 12:00:52 -04:00
committed by GitHub
parent 250718a40f
commit 589e67e4af
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
core/src/utils/animation/animation.ts
View File

@ -128,8 +128,8 @@ export const createAnimation = (): Animation => {
webAnimations.length = 0; webAnimations.length = 0;
} else { } else {
elements.forEach(element => { raf(() => {
raf(() => { elements.forEach(element => {
removeStyleProperty(element, 'animation-name'); removeStyleProperty(element, 'animation-name');
removeStyleProperty(element, 'animation-duration'); removeStyleProperty(element, 'animation-duration');
removeStyleProperty(element, 'animation-timing-function'); removeStyleProperty(element, 'animation-timing-function');
@ -632,8 +632,8 @@ export const createAnimation = (): Animation => {
}; };
const updateCSSAnimation = (toggleAnimationName = true) => { const updateCSSAnimation = (toggleAnimationName = true) => {
elements.forEach(element => { raf(() => {
raf(() => { elements.forEach(element => {
setStyleProperty(element, 'animation-name', keyframeName || null); setStyleProperty(element, 'animation-name', keyframeName || null);
setStyleProperty(element, 'animation-duration', `${getDuration()}ms`); setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
setStyleProperty(element, 'animation-timing-function', getEasing()); setStyleProperty(element, 'animation-timing-function', getEasing());
@ -796,12 +796,12 @@ export const createAnimation = (): Animation => {
const playCSSAnimations = () => { const playCSSAnimations = () => {
clearCSSAnimationsTimeout(); clearCSSAnimationsTimeout();
elements.forEach(element => { raf(() => {
if (_keyframes.length > 0) { elements.forEach(element => {
raf(() => { if (_keyframes.length > 0) {
setStyleProperty(element, 'animation-play-state', 'running'); setStyleProperty(element, 'animation-play-state', 'running');
}); }
} });
}); });
if (_keyframes.length === 0 || elements.length === 0) { if (_keyframes.length === 0 || elements.length === 0) {