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): properties can be cleared after animation finishes (#19155)

Browse Source 
* remove certain properties when done animating

* fix bug, add more tests

* clean up

* bug fix
This commit is contained in:
Liam DeBeasi
2019-08-22 16:12:17 -04:00
committed by GitHub
parent 62a04d76f1
commit 50a92c026c
5 changed files with 164 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1047,29 +1047,84 @@ export const createAnimation = () => {
return ani;
};
const to = (property: string, value: any) => {
const to = (property: string, value: any, clearAfterAnimation?: boolean) => {
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
*/
} else {
const object: any = {
offset: 1
};
object[property] = value;
_keyframes = [
..._keyframes,
object
{ 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) => {
return from(property, fromValue).to(property, toValue);
const fromTo = (property: string, fromValue: any, toValue: any, clearAfterAnimation?: boolean) => {
return from(property, fromValue).to(property, toValue, clearAfterAnimation);
};
return ani = {