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 headerEl: HTMLDivElement | undefined;
private currentRaf: number | undefined; private currentRaf: number | undefined;
private skipNextAnimation = false;
@Element() el?: HTMLElement; @Element() el?: HTMLElement;
@ -295,6 +296,10 @@ export class Accordion implements ComponentInterface {
* of what is set in the config. * of what is set in the config.
*/ */
private shouldAnimate = () => { private shouldAnimate = () => {
if (this.skipNextAnimation) {
return false;
}
if (typeof (window as any) === 'undefined') { if (typeof (window as any) === 'undefined') {
return false; return false;
} }
@ -316,6 +321,14 @@ export class Accordion implements ComponentInterface {
return true; return true;
}; };
private disableAnimationTemporarily() {
this.skipNextAnimation = true;
}
componentDidRender() {
this.skipNextAnimation = false;
}
private updateState = async (initialUpdate = false) => { private updateState = async (initialUpdate = false) => {
const accordionGroup = this.accordionGroupEl; const accordionGroup = this.accordionGroupEl;
const accordionValue = this.value; const accordionValue = this.value;
@ -327,6 +340,11 @@ export class Accordion implements ComponentInterface {
const value = accordionGroup.value; const value = accordionGroup.value;
const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue; const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
const shouldDisableAnimation = initialUpdate && shouldExpand;
if (shouldDisableAnimation) {
this.disableAnimationTemporarily();
}
if (shouldExpand) { if (shouldExpand) {
this.expandAccordion(initialUpdate); 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-expanded')).toEqual(true);
expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false); 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 () => { 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-expanded')).toEqual(true);
expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false); 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 () => { 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]; const lastDetail = details[details.length - 1];
expect(lastDetail?.initial).toBe(false); 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 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047