Improve disclosure collapse animation

[zerebos]

Proposed change

Improves the new collapse feature with a more modern drawer slide animation. It also allows the document to transition the layout of elements at the same time. This results in a much less jarring collapse than before where suddenly the page would shift after the animation completed. This was especially apparent for larger sections.

Please see a demo video blow

GTP06Y7sDA.mp4

This change was tested and works as expected for both mobile and desktop, but I don't have a mobile recording. Others can test on mobile or desktop currently on my personal homepage instance if they want. (URL upon request as I don't want to appear to self-promote)

Closes # (issue)

Type of change

• New service widget
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Other (please explain)

Minor improvement to a recently introduced feature.

Checklist:

• If adding a service widget or a change that requires it, I have added a corresponding PR to the documentation here:
• If adding a new widget I have reviewed the guidelines.
• If applicable, I have checked that all tests pass with e.g. pnpm lint.
• If applicable, I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.

[shamoon]

Thanks, this is pretty subjective but I've always understood that having more than one animation together creates a more pleasing effect so I've added back the fade. LMK your thoughts.

1704.mov

[shamoon]

Did you disable pushing to the PR?

[zerebos]

Hmmm I definitely prefer it without the opacity change personally, but as you said it can be quite subjective. I typically don't see these type of sliding/collapsing animations combined with an opacity transition.

Did you disable pushing to the PR? ("Allow edits by maintainers")

I typically do, yeah, to encourage discussions/suggestions before changes are made and pushed. But I'll turn it back on if it's the norm in this repo.

[shamoon]

The thing for me is the group doesnt collapse into a smaller element, it collapses into nothing, so IMHO it looks kinda odd to just slide up to 0px, the fade makes that a bit more graceful.

[zerebos]

Again, I have to really disagree personally. Typically, collapsible sections that collapse into the header don't also fade—it defeats the purpose of the collapsing animation imo.

Examples:

• https://tailwind-elements.com/docs/standard/components/collapse/
• https://tailwind-elements.com/docs/standard/components/accordion/
• https://www.w3schools.com/howto/howto_js_accordion.asp
• https://www.freecodecamp.org/news/build-an-accordion-menu-using-html-css-and-javascript/
• https://accordionslider.com/
• https://www.w3schools.com/howto/howto_js_collapsible.asp
• https://getbootstrap.com/docs/4.0/components/collapse/
• https://www.digitalocean.com/community/tutorials/css-collapsible
• https://materializecss.com/collapsible.html

[shamoon]

@benphelps whatever you think here

[benphelps]

I prefer the opacity fade version myself, but after looking through some more resources on my own, it does seem like the overwhelming consensus is to not fade.

[zerebos]

I considered suggesting the addition of a new configuration option for type of collapse animation but I think that might be overkill.

For now, I'm going to go look through some discussions and see how else I might contribute.

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion or issue for related concerns.