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

2
core/src/components/menu/menu.tsx
View File

@ -420,7 +420,7 @@ export class Menu implements ComponentInterface, MenuI {
this.lastOnEnd = detail.timeStamp; this.lastOnEnd = detail.timeStamp;
this.animation this.animation
.onFinish(() => this.afterAnimation(shouldOpen), { .onFinish(() => this.afterAnimation(shouldOpen), {
oneTime: true oneTimeCallback: true
}) })
.progressEnd(shouldComplete, stepValue, realDur); .progressEnd(shouldComplete, stepValue, realDur);
} }

2
core/src/utils/animation/animation-interface.ts
View File

@ -64,7 +64,7 @@ export interface AnimationOnFinishCallback {
} }
export interface AnimationOnFinishOptions { export interface AnimationOnFinishOptions {
oneTime: boolean; oneTimeCallback: boolean;
} }
export type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'; export type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';

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

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