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

fix(animation): track correctly when updating CSS Animation (#19813)

Browse Source 
* fix bug

* update menu

* fix
This commit is contained in:
Liam DeBeasi
2019-10-31 12:50:54 -04:00
committed by GitHub
parent 96a5e600e5
commit 7bd4412889
3 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ interface AnimationInternal extends Animation {
/**
* Updates any existing animations.
*/
update(deep: boolean): Animation;
update(deep: boolean, toggleAnimationName: boolean, step?: number): Animation;
animationFinish(): void;
}
@ -611,8 +611,7 @@ export const createAnimation = (animationId?: string): Animation => {
});
} else {
const animationDelay = getDelay() || 0;
const animationDuration = `-${animationDelay + (getDuration()! * step)}ms`;
const animationDuration = `-${getDuration()! * step}ms`;
elements.forEach(element => {
if (_keyframes.length > 0) {
@ -623,7 +622,7 @@ export const createAnimation = (animationId?: string): Animation => {
}
};
const updateWebAnimation = () => {
const updateWebAnimation = (step?: number) => {
webAnimations.forEach(animation => {
animation.effect.updateTiming({
delay: getDelay(),
@ -634,15 +633,19 @@ export const createAnimation = (animationId?: string): Animation => {
direction: getDirection()
});
});
if (step !== undefined) {
setAnimationStep(step);
}
};
const updateCSSAnimation = (toggleAnimationName = true) => {
const updateCSSAnimation = (toggleAnimationName = true, step?: number) => {
raf(() => {
elements.forEach(element => {
setStyleProperty(element, 'animation-name', keyframeName || null);
setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
setStyleProperty(element, 'animation-timing-function', getEasing());
setStyleProperty(element, 'animation-delay', `${getDelay()}ms`);
setStyleProperty(element, 'animation-delay', (step !== undefined) ? `-${step! * getDuration()}ms` : `${getDelay()}ms`);
setStyleProperty(element, 'animation-fill-mode', getFill() || null);
setStyleProperty(element, 'animation-direction', getDirection() || null);
@ -663,25 +666,25 @@ export const createAnimation = (animationId?: string): Animation => {
});
};
const update = (deep = false, toggleAnimationName = true) => {
const update = (deep = false, toggleAnimationName = true, step?: number) => {
if (deep) {
childAnimations.forEach(animation => {
animation.update(deep);
animation.update(deep, toggleAnimationName, step);
});
}
if (supportsWebAnimations) {
updateWebAnimation();
updateWebAnimation(step);
} else {
updateCSSAnimation(toggleAnimationName);
updateCSSAnimation(toggleAnimationName, step);
}
return ani;
};
const progressStart = (forceLinearEasing = false) => {
const progressStart = (forceLinearEasing = false, step?: number) => {
childAnimations.forEach(animation => {
animation.progressStart(forceLinearEasing);
animation.progressStart(forceLinearEasing, step);
});
pauseAnimation();
@ -690,8 +693,7 @@ export const createAnimation = (animationId?: string): Animation => {
if (!initialized) {
initializeAnimation();
} else {
update();
setAnimationStep(0);
update(false, true, step);
}
return ani;