javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +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

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

@ -208,26 +208,19 @@ export class Accordion implements ComponentInterface {
}
if (this.shouldAnimate()) {
this.state = AccordionState.Expanding;
raf(() => {
this.state = AccordionState.Expanding;
this.currentRaf = raf(async () => {
const contentHeight = contentElWrapper.offsetHeight;
const waitForTransition = transitionEndAsync(contentEl, 2000);
contentEl.style.setProperty('max-height', `${contentHeight}px`);
this.currentRaf = raf(async () => {
const contentHeight = contentElWrapper.offsetHeight;
const waitForTransition = transitionEndAsync(contentEl, 2000);
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;
contentEl.style.removeProperty('max-height');
this.state = AccordionState.Expanded;
contentEl.style.removeProperty('max-height');
});
});
} else {
this.state = AccordionState.Expanded;
@ -254,22 +247,16 @@ export class Accordion implements ComponentInterface {
const contentHeight = contentEl.offsetHeight;
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;
raf(async () => {
const waitForTransition = transitionEndAsync(contentEl, 2000);
const waitForTransition = transitionEndAsync(contentEl, 2000);
this.state = AccordionState.Collapsing;
this.state = AccordionState.Collapsing;
await waitForTransition;
await waitForTransition;
this.state = AccordionState.Collapsed;
contentEl.style.removeProperty('max-height');
this.state = AccordionState.Collapsed;
contentEl.style.removeProperty('max-height');
});
});
} else {
this.state = AccordionState.Collapsed;