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): properly clean up elements (#19210)

Browse Source 
* fix destroy method

* wrap dom writes in raf

* Add comments
This commit is contained in:
Liam DeBeasi
2019-08-28 12:01:29 -04:00
committed by GitHub
parent da5d3f0e04
commit 93f2064927
1 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,6 +60,10 @@ export const createAnimation = () => {
* Destroy the animation and all child animations.
*/
const destroy = () => {
childAnimations.forEach(childAnimation => {
childAnimation.destroy();
});
cleanUp();
elements.length = 0;
@ -71,10 +75,6 @@ export const createAnimation = () => {
initialized = false;
shouldCalculateNumAnimations = true;
childAnimations.forEach(childAnimation => {
childAnimation.destroy();
});
return ani;
};
@ -124,14 +124,16 @@ export const createAnimation = () => {
webAnimations.length = 0;
} else {
elements.forEach(element => {
removeStyleProperty(element, 'animation-name');
removeStyleProperty(element, 'animation-duration');
removeStyleProperty(element, 'animation-timing-function');
removeStyleProperty(element, 'animation-iteration-count');
removeStyleProperty(element, 'animation-delay');
removeStyleProperty(element, 'animation-play-state');
removeStyleProperty(element, 'animation-fill-mode');
removeStyleProperty(element, 'animation-direction');
requestAnimationFrame(() => {
removeStyleProperty(element, 'animation-name');
removeStyleProperty(element, 'animation-duration');
removeStyleProperty(element, 'animation-timing-function');
removeStyleProperty(element, 'animation-iteration-count');
removeStyleProperty(element, 'animation-delay');
removeStyleProperty(element, 'animation-play-state');
removeStyleProperty(element, 'animation-fill-mode');
removeStyleProperty(element, 'animation-direction');
});
});
}
};
@ -142,7 +144,14 @@ export const createAnimation = () => {
*/
const cleanUpStyleSheets = () => {
stylesheets.forEach(stylesheet => {
stylesheet.parentNode!.removeChild(stylesheet);
/**
* When sharing stylesheets, it's possible
* for another animation to have already
* cleaned up a particular stylesheet
*/
if (stylesheet && stylesheet.parentNode) {
stylesheet.parentNode.removeChild(stylesheet);
}
});
stylesheets.length = 0;