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

perf(animation): improve reliability of reusing animation (#19106)

Browse Source 
* fix race condition on reset

* fix linter

* fix linter

* remove unneeded pause at end
This commit is contained in:
Liam DeBeasi
2019-08-15 10:08:55 -04:00
committed by GitHub
parent 930b271a4a
commit 7f39f8c357
1 changed files with 14 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -614,7 +614,6 @@ export const createAnimation = () => {
const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element); const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
stylesheets.push(stylesheet); stylesheets.push(stylesheet);
setStyleProperty(element, 'animation-name', stylesheet.id || null);
setStyleProperty(element, 'animation-duration', (getDuration() !== undefined) ? `${getDuration()}ms` : null); setStyleProperty(element, 'animation-duration', (getDuration() !== undefined) ? `${getDuration()}ms` : null);
setStyleProperty(element, 'animation-timing-function', getEasing() || null); setStyleProperty(element, 'animation-timing-function', getEasing() || null);
setStyleProperty(element, 'animation-delay', (getDelay() !== undefined) ? `${getDelay()}ms` : null); setStyleProperty(element, 'animation-delay', (getDelay() !== undefined) ? `${getDelay()}ms` : null);
@ -628,6 +627,11 @@ export const createAnimation = () => {
setStyleProperty(element, 'animation-iteration-count', iterationsCount); setStyleProperty(element, 'animation-iteration-count', iterationsCount);
setStyleProperty(element, 'animation-play-state', 'paused'); setStyleProperty(element, 'animation-play-state', 'paused');
setStyleProperty(element, 'animation-name', `${stylesheet.id}-alt`);
requestAnimationFrame(() => {
setStyleProperty(element, 'animation-name', stylesheet.id || null);
});
} }
}); });
}; };
@ -794,30 +798,6 @@ export const createAnimation = () => {
willComplete = shouldComplete; willComplete = shouldComplete;
if (!shouldComplete) { if (!shouldComplete) {
onFinish(() => {
pause(false);
willComplete = true;
forceDurationValue = undefined;
if (supportsWebAnimations) {
forceDirectionValue = undefined;
forceDelayValue = undefined;
} else {
/**
* Parent animations at this point may not have finished
*/
forceDirectionValue = (getDirection() === 'reverse') ? 'normal' : 'reverse';
forceDelayValue = 0;
update();
forceDirectionValue = undefined;
}
}, {
oneTime: true
});
forceDirectionValue = (getDirection() === 'reverse') ? 'normal' : 'reverse'; forceDirectionValue = (getDirection() === 'reverse') ? 'normal' : 'reverse';
if (supportsWebAnimations) { if (supportsWebAnimations) {
@ -828,21 +808,21 @@ export const createAnimation = () => {
update(false, false); update(false, false);
} }
} else { } else {
onFinish(() => {
pause(false);
forceDurationValue = undefined;
forceDelayValue = undefined;
}, {
oneTime: true
});
if (!supportsWebAnimations) { if (!supportsWebAnimations) {
forceDelayValue = (step * getDuration()!) * -1; forceDelayValue = (step * getDuration()!) * -1;
update(false, false); update(false, false);
} }
} }
onFinish(() => {
willComplete = true;
forceDurationValue = undefined;
forceDirectionValue = undefined;
forceDelayValue = undefined;
}, {
oneTime: true
});
if (!parentAnimation) { if (!parentAnimation) {
play(); play();
} }