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

fix(accordion): re-rendering after intitial load to reset animation skip state and allow animations on first interaction

Browse Source
This commit is contained in:
ShaneK
2025-10-22 06:46:57 -07:00
parent cc125e6a7e
commit 90ebfba6d7
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
import { Component, Element, Host, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
import { chevronDown } from 'ionicons/icons';
@ -132,7 +132,15 @@ export class Accordion implements ComponentInterface {
}
componentDidRender() {
this.skipNextAnimation = false;
if (this.skipNextAnimation) {
this.skipNextAnimation = false;
/**
* The initial render disables animations so framework-provided
* values do not cause the accordion to animate. Force a repaint
* so subsequent user interactions animate as expected.
*/
forceUpdate(this);
}
}
private setItemDefaults = () => {

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

@ -234,7 +234,6 @@ 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 () => {
@ -272,7 +271,6 @@ 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 () => {