Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8f029d4

Browse files
committed
fix(accordion-group): skipping initial arrow animation
1 parent 2095f2f commit 8f029d4

File tree

2 files changed

+22
-0
lines changed

2 files changed

+22
-0
lines changed

‎core/src/components/accordion/accordion.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export class Accordion implements ComponentInterface {
4848
private headerEl: HTMLDivElement | undefined;
4949

5050
private currentRaf: number | undefined;
51+
private skipNextAnimation = false;
5152

5253
@Element() el?: HTMLElement;
5354

@@ -295,6 +296,10 @@ export class Accordion implements ComponentInterface {
295296
* of what is set in the config.
296297
*/
297298
private shouldAnimate = () => {
299+
if (this.skipNextAnimation) {
300+
return false;
301+
}
302+
298303
if (typeof (window as any) === 'undefined') {
299304
return false;
300305
}
@@ -316,6 +321,13 @@ export class Accordion implements ComponentInterface {
316321
return true;
317322
};
318323

324+
private disableAnimationTemporarily() {
325+
this.skipNextAnimation = true;
326+
raf(() => {
327+
this.skipNextAnimation = false;
328+
});
329+
}
330+
319331
private updateState = async (initialUpdate = false) => {
320332
const accordionGroup = this.accordionGroupEl;
321333
const accordionValue = this.value;
@@ -327,6 +339,11 @@ export class Accordion implements ComponentInterface {
327339
const value = accordionGroup.value;
328340

329341
const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
342+
const shouldDisableAnimation = initialUpdate && shouldExpand;
343+
344+
if (shouldDisableAnimation) {
345+
this.disableAnimationTemporarily();
346+
}
330347

331348
if (shouldExpand) {
332349
this.expandAccordion(initialUpdate);

‎core/src/components/accordion/test/accordion.spec.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,7 @@ it('should not animate when initial value is set before load', async () => {
234234

235235
expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
236236
expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
237+
expect(firstAccordion.classList.contains('accordion-animated')).toEqual(false);
237238
});
238239

239240
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 () => {
271272

272273
expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
273274
expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
275+
expect(firstAccordion.classList.contains('accordion-animated')).toEqual(false);
274276
});
275277

276278
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 () => {
298300

299301
const lastDetail = details[details.length - 1];
300302
expect(lastDetail?.initial).toBe(false);
303+
304+
const firstAccordion = accordionGroup.querySelector('ion-accordion[value="first"]')!;
305+
expect(firstAccordion.classList.contains('accordion-animated')).toEqual(true);
301306
});
302307

303308
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /