javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(accordion-group): skipping initial arrow animation

Browse Source
This commit is contained in:
ShaneK
2025-10-21 08:34:57 -07:00
parent 2095f2f1c5
commit 63f32a53df
2 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,6 +48,7 @@ export class Accordion implements ComponentInterface {
private headerEl: HTMLDivElement | undefined;
private currentRaf: number | undefined;
private skipNextAnimation = false;
@Element() el?: HTMLElement;
@ -295,6 +296,10 @@ export class Accordion implements ComponentInterface {
* of what is set in the config.
*/
private shouldAnimate = () => {
if (this.skipNextAnimation) {
return false;
}
if (typeof (window as any) === 'undefined') {
return false;
}
@ -316,6 +321,14 @@ export class Accordion implements ComponentInterface {
return true;
};
private disableAnimationTemporarily() {
this.skipNextAnimation = true;
}
componentDidRender() {
this.skipNextAnimation = false;
}
private updateState = async (initialUpdate = false) => {
const accordionGroup = this.accordionGroupEl;
const accordionValue = this.value;
@ -327,6 +340,11 @@ export class Accordion implements ComponentInterface {
const value = accordionGroup.value;
const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
const shouldDisableAnimation = initialUpdate && shouldExpand;
if (shouldDisableAnimation) {
this.disableAnimationTemporarily();
}
if (shouldExpand) {
this.expandAccordion(initialUpdate);

5
core/src/components/accordion/test/accordion.spec.ts
View File

@ -234,6 +234,7 @@ it('should not animate when initial value is set before load', async () => {
expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
expect(firstAccordion.classList.contains('accordion-animated')).toEqual(false);
});
it('should not animate when initial value is set after load', async () => {
@ -271,6 +272,7 @@ it('should not animate when initial value is set after load', async () => {
expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
expect(firstAccordion.classList.contains('accordion-animated')).toEqual(false);
});
it('should animate when accordion is first opened by user', async () => {
@ -298,6 +300,9 @@ it('should animate when accordion is first opened by user', async () => {
const lastDetail = details[details.length - 1];
expect(lastDetail?.initial).toBe(false);
const firstAccordion = accordionGroup.querySelector('ion-accordion[value="first"]')!;
expect(firstAccordion.classList.contains('accordion-animated')).toEqual(true);
});
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047