Will we be able to add an open and close animation to Disclosure?

[vicky-comeau]

Hi, I was wondering if it is in the future plans to allow slide up and down animations or transitions to the Disclosure/DisclosureGroup components.

I have tried to add this to Disclosure, with no success. I can add it for when it opens, but because isExpanded is set to false immediately and the content is hidden, I cannot get the proper height and the close transition does not work. I would end up having to control state on my side instead of using the react aria component.

If anyone has any ideas on how to currently do this, I'm all ears.

[AndresMangano]

@vicky-comeau Where you able to add animations to accordions? (Disclosure if you prefer that name)

[vicky-comeau]

I ended up using an experimental feature that is only supported in chromium browsers.
This was interpolate-size: allow-keywords; that allows you to transition height to auto.
The other was transition-behavior: allow-discrete; to be able to transition content-visibility.
Hope this helps!
For more browser support, no I wasn't able to find a good solution.

[meesvandongen]

Note that it is also important to add transition-property: content-visibility for the hidden disclosure panel.

@media (prefers-reduced-motion: no-preference) {
	transition-behavior: allow-discrete;
	interpolate-size: allow-keywords;
	overflow-y: clip;
	transition-property: content-visibility, height;
	transition-timing-function: ease;
	transition-duration: 150ms;
	height: auto;
	&[aria-hidden="true"] {
		height: 0;
	}
}

[dimitraz]

+1, this would be extremely useful

[yihuiliao]

ticket to follow: #7528