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

fix(animation): prevent animation re-run when toggling element visibility (#19115)

Browse Source 
* clean up pause fn, rename oneTime to oneTimeCallback

* remove duration, play state, and delay from animations to prevent reruns when toggling visibility
This commit is contained in:
Liam DeBeasi
2019-08-16 10:18:06 -04:00
committed by GitHub
parent 7f39f8c357
commit 624e118b56
3 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -92,7 +92,7 @@ export const createAnimation = () => {
* upon the animation ending
*/
const onFinish = (callback: any, opts?: AnimationOnFinishOptions) => {
const callbacks = (opts && opts.oneTime) ? onFinishOneTimeCallbacks : onFinishCallbacks;
const callbacks = (opts && opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
callbacks.push({ callback, opts } as AnimationOnFinishCallback);
return ani;
@ -758,7 +758,7 @@ export const createAnimation = () => {
animation.progressStart(forceLinearEasing);
});
pause(false);
pauseAnimation();
shouldForceLinearEasing = forceLinearEasing;
if (!initialized) {
@ -783,7 +783,6 @@ export const createAnimation = () => {
return ani;
};
// TODO: Need to clean this up
const progressEnd = (shouldComplete: boolean, step: number, dur: number | undefined) => {
childAnimations.forEach(animation => {
animation.progressEnd(shouldComplete, step, dur);
@ -820,7 +819,7 @@ export const createAnimation = () => {
forceDirectionValue = undefined;
forceDelayValue = undefined;
}, {
oneTime: true
oneTimeCallback: true
});
if (!parentAnimation) {
@ -830,16 +829,7 @@ export const createAnimation = () => {
return ani;
};
/**
* Pause the animation.
*/
const pause = (deep = true) => {
if (deep) {
childAnimations.forEach(animation => {
animation.pause();
});
}
const pauseAnimation = () => {
if (initialized) {
if (supportsWebAnimations) {
getWebAnimations().forEach(animation => {
@ -851,6 +841,17 @@ export const createAnimation = () => {
});
}
}
};
/**
* Pause the animation.
*/
const pause = () => {
childAnimations.forEach(animation => {
animation.pause();
});
pauseAnimation();
return ani;
};
@ -862,7 +863,7 @@ export const createAnimation = () => {
*/
const playAsync = () => {
return new Promise(resolve => {
onFinish(resolve, { oneTime: true });
onFinish(resolve, { oneTimeCallback: true });
play();
return ani;
@ -877,7 +878,7 @@ export const createAnimation = () => {
const playSync = () => {
shouldForceSyncPlayback = true;
onFinish(() => shouldForceSyncPlayback = false, { oneTime: true });
onFinish(() => shouldForceSyncPlayback = false, { oneTimeCallback: true });
play();
return ani;
@ -921,11 +922,22 @@ export const createAnimation = () => {
animationEnd(elements[0], () => {
clearCSSAnimationsTimeout();
clearCSSAnimationPlayState();
animationFinish();
});
}
};
const clearCSSAnimationPlayState = () => {
elements.forEach(element => {
requestAnimationFrame(() => {
removeStyleProperty(element, 'animation-duration');
removeStyleProperty(element, 'animation-delay');
removeStyleProperty(element, 'animation-play-state');
});
});
};
const playWebAnimations = () => {
getWebAnimations().forEach(animation => {
animation.play();