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): avoid partial keyframes (#19169)

Browse Source 
* ensure custom props not part of final keyframes

* fix clear

* clean up
This commit is contained in:
Liam DeBeasi
2019-08-23 12:48:20 -04:00
committed by GitHub
parent c610406ba6
commit f2cfdf1bad
5 changed files with 19 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,6 +64,8 @@ export const createAnimation = () => {
elements.length = 0;
childAnimations.length = 0;
_keyframes.length = 0;
clearOnFinish();
initialized = false;
@ -1033,13 +1035,8 @@ export const createAnimation = () => {
if (firstFrame != null && (firstFrame.offset === undefined || firstFrame.offset === 0)) {
firstFrame[property] = value;
} else {
const object: any = {
offset: 0
};
object[property] = value;
_keyframes = [
object,
{ offset: 0, [property]: value },
..._keyframes
];
}
@ -1047,84 +1044,22 @@ export const createAnimation = () => {
return ani;
};
const to = (property: string, value: any, clearAfterAnimation?: boolean) => {
const to = (property: string, value: any) => {
const lastFrame = _keyframes[_keyframes.length - 1];
if (lastFrame != null && (lastFrame.offset === undefined || lastFrame.offset === 1)) {
/**
* If last frame is not the clear frame
* set the value as usual
*/
if (!lastFrame.clear) {
lastFrame[property] = value;
} else {
/**
* If last frame is the keyframe then we need to
* set the value on the previous frame
*/
const secondToLastFrame = _keyframes[_keyframes.length - 2];
secondToLastFrame[property] = value;
}
/**
* If not on the last possible keyframe, add
* the last keyframe
*/
lastFrame[property] = value;
} else {
_keyframes = [
..._keyframes,
{ offset: 1, [property]: value }
];
}
if (clearAfterAnimation) {
const lastFrame = _keyframes[_keyframes.length - 1];
if (lastFrame != null) {
/**
* If we are on the clear frame, just set the property
*/
if (lastFrame.clear) {
lastFrame[property] = '';
return ani;
}
/**
* If we are already setup for a clear frame, just mark it
* as such and set the property
*/
const secondToLastFrame = _keyframes[_keyframes.length - 2];
if (lastFrame.offset === 1 && secondToLastFrame.offset === 0.99) {
lastFrame.clear = true;
lastFrame[property] = '';
secondToLastFrame[property] = value;
return ani;
}
/**
* If the last frame is not the clear frame
* and has an offset of 1, we need to move it
* back by a frame to account for the clear frame
*/
if (lastFrame.offset === 1 && secondToLastFrame.offset !== 0.99) {
lastFrame.offset = 0.99;
}
/**
* Add a clear frame that runs immediately after
* the last frame that the user has set. This will
* allow users to clear certain properties from elements
*/
_keyframes.push({ offset: lastFrame.offset + 0.01, [property]: '', clear: true });
}
}
return ani;
};
const fromTo = (property: string, fromValue: any, toValue: any, clearAfterAnimation?: boolean) => {
return from(property, fromValue).to(property, toValue, clearAfterAnimation);
const fromTo = (property: string, fromValue: any, toValue: any) => {
return from(property, fromValue).to(property, toValue);
};
return ani = {