javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 09:34:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(animation): remove display: none check (#19086)

Browse Source 
* wrap offsetParent in raf

* Revert "wrap offsetParent in raf"
merge
This reverts commit 9910032964b01d9b58b3b1a199fce52853089257.

* remove display none check, add note to document
This commit is contained in:
Liam DeBeasi
2019-08-13 14:46:40 -04:00
committed by GitHub
parent a2b7d57336
commit 0b1e23f754
2 changed files with 18 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -923,22 +923,20 @@ export const createAnimation = () => {
}
});
const animationDelay = getDelay() || 0;
const animationDuration = getDuration() || 0;
const visibleElements = elements.filter(element => element.offsetParent !== null);
if (visibleElements.length === 0 || _keyframes.length === 0 || elements.length === 0) {
if (_keyframes.length === 0 || elements.length === 0) {
animationFinish();
} else {
/**
* This is a catchall in the event that a CSS Animation did not finish.
* The Web Animations API has mechanisms in place for preventing this.
* CSS Animations will not fire an `animationend` event
* for elements with `display: none`. The Web Animations API
* accounts for this, but using raw CSS Animations requires
* this workaround.
*/
animationFinish();
} else if (_keyframes.length > 0 && elements.length > 0) {
/**
* This is a catchall in the event that a CSS Animation did not finish.
* The Web Animations API has mechanisms in place for preventing this.
*/
const animationDelay = getDelay() || 0;
const animationDuration = getDuration() || 0;
cssAnimationsTimerFallback = setTimeout(onAnimationEndFallback, animationDelay + animationDuration + ANIMATION_END_FALLBACK_PADDING_MS);
animationEnd(elements[0], () => {

37
core/src/utils/animation/test/display/e2e.ts
View File

@ -4,6 +4,15 @@ import { listenForEvent, waitForFunctionTestContext } from '../../../test/utils'
test(`animation:web: display`, async () => {
const page = await newE2EPage({ url: '/src/utils/animation/test/display' });
await runTest(page);
});
test(`animation:css: display`, async () => {
const page = await newE2EPage({ url: '/src/utils/animation/test/display?ionic:_forceCSSAnimations=true' });
await runTest(page);
});
const runTest = async (page: any) => {
const screenshotCompares = [];
screenshotCompares.push(await page.compareScreenshot());
@ -25,30 +34,4 @@ test(`animation:web: display`, async () => {
}, { animationStatus });
screenshotCompares.push(await page.compareScreenshot());
});
test(`animation:css: display`, async () => {
const page = await newE2EPage({ url: '/src/utils/animation/test/display?ionic:_forceCSSAnimations=true' });
const screenshotCompares = [];
screenshotCompares.push(await page.compareScreenshot());
const ANIMATION_FINISHED = 'onIonAnimationFinished';
const animationStatus = [];
await page.exposeFunction(ANIMATION_FINISHED, (ev: any) => {
animationStatus.push(ev.detail);
});
const squareA = await page.$('.square-a');
await listenForEvent(page, 'ionAnimationFinished', squareA, ANIMATION_FINISHED);
await page.click('.play');
await page.waitForSelector('.play');
await waitForFunctionTestContext((payload: any) => {
// CSS Animations do not account for elements with `display: none` very well, so we need to add a workaround for this.
return payload.animationStatus.join(', ') === ['AnimationAFinished', 'AnimationBFinished', 'AnimationRootFinished'].join(', ');
}, { animationStatus });
screenshotCompares.push(await page.compareScreenshot());
});
};