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

fix(accordion): improved reliability of accordion animations (#23531)

Browse Source 
resolves #23504
This commit is contained in:
Liam DeBeasi
2021-06-29 09:28:21 -04:00
committed by GitHub
parent 9a60dd0ea7
commit 6fbd60b0df
1 changed files with 17 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
core/src/components/accordion/accordion.tsx
View File

@ -208,6 +208,7 @@ export class Accordion implements ComponentInterface {
} }
if (this.shouldAnimate()) { if (this.shouldAnimate()) {
raf(() => {
this.state = AccordionState.Expanding; this.state = AccordionState.Expanding;
this.currentRaf = raf(async () => { this.currentRaf = raf(async () => {
@ -215,20 +216,12 @@ export class Accordion implements ComponentInterface {
const waitForTransition = transitionEndAsync(contentEl, 2000); const waitForTransition = transitionEndAsync(contentEl, 2000);
contentEl.style.setProperty('max-height', `${contentHeight}px`); contentEl.style.setProperty('max-height', `${contentHeight}px`);
/**
* Force a repaint. We can't use an raf
* here as it could cause the collapse animation
* to get out of sync with the other
* accordion's expand animation.
*/
// tslint:disable-next-line
void contentEl.offsetHeight;
await waitForTransition; await waitForTransition;
this.state = AccordionState.Expanded; this.state = AccordionState.Expanded;
contentEl.style.removeProperty('max-height'); contentEl.style.removeProperty('max-height');
}); });
});
} else { } else {
this.state = AccordionState.Expanded; this.state = AccordionState.Expanded;
} }
@ -254,16 +247,9 @@ export class Accordion implements ComponentInterface {
const contentHeight = contentEl.offsetHeight; const contentHeight = contentEl.offsetHeight;
contentEl.style.setProperty('max-height', `${contentHeight}px`); contentEl.style.setProperty('max-height', `${contentHeight}px`);
/** raf(async () => {
* Force a repaint. We can't use an raf
* here as it could cause the collapse animation
* to get out of sync with the other
* accordion's expand animation.
*/
// tslint:disable-next-line
void contentEl.offsetHeight;
const waitForTransition = transitionEndAsync(contentEl, 2000); const waitForTransition = transitionEndAsync(contentEl, 2000);
this.state = AccordionState.Collapsing; this.state = AccordionState.Collapsing;
await waitForTransition; await waitForTransition;
@ -271,6 +257,7 @@ export class Accordion implements ComponentInterface {
this.state = AccordionState.Collapsed; this.state = AccordionState.Collapsed;
contentEl.style.removeProperty('max-height'); contentEl.style.removeProperty('max-height');
}); });
});
} else { } else {
this.state = AccordionState.Collapsed; this.state = AccordionState.Collapsed;
} }