Accordion Example: Add animation on expand/collapse

[hiwelo]

Update of the CSS for the accordion example to add an expand/collapse animation as described in the issue #597.

For an accessibility purpose to people with some cognitive impairments, I added to media query to remove the animation if users configured reduced-motion on their device.

[mcking65]

Thank you @hiwelo for this contribution! Before merging this, I'd like to get #838 done and merged as that one is blocking development of tests by @spectranaut. As soon as we have #838 done, I'll come back to this.

[hiwelo]

@mcking65 now that the #838 is merged, do you want to merge this one?

[mcking65]

Friendly ping to @sh0ji ... could you please review this?

[sh0ji]

I'm relatively certain that an effective disclosure/accordion animation cannot be accomplished in pure CSS. The issue is that you have to transition the box model (preferably shrink an outer box so that the actual inner content is simply obscured via overflow: hidden), and THEN switch the visibility/display. That has to be reversed when opening—switch to visible, then transition.

This can be accomplished with a combination of a transitionend listener and requestAnimationFrame, but not without them as far as I'm aware. I'd love to be wrong about this!

[sh0ji]

👍

[sh0ji]

Setting visibility to hidden here prevents the majority of the animation from happening since it causes the element to have no height, which in turn means that the height cannot transition to 0. The end result is that only the padding is actually transitioning.

[mcking65]

@sh0ji, thank you for the review.

@hiwelo, sorry for the very long delay on this. Given comments by @sh0ji, what would you like to do? I will close this PR for now. We can either re-open or start a new one if you have time to work on it more.

BTW, We are wrapping up change for release 3 this month. We'll start on the June release in January.