Semantic-ui: [Accordion] Rewrite to Remove JS Animations

[SantzDesign]

This component should be optimized for better performance on modern browsers.

I would suggest making it like Bootstrap's collapse, using transition: height 0.3s ease;, leaving aside the low-performant jQuery .slideUp() and .slideDown() functions.

Thanks!

[jlukic]

CSS transitions do not work with height: auto, however there is probably a way to handle this simply programmatically

[SantzDesign]

I know @jlukic! I'd love to help but I don't do JS. I'd suggest checking out how the Twitter guys are achieving it on their Bootstrap accordions. They don't transition max-height, they transition height.

[witrin]

Starting with the class collapse on toggle: Add the class collapsing and remove collapse. Calculate the target height and set it in the style attribute. At the end of the transition (by using a callback) remove the class collapsing, add the classes collapse and in the clear the style attribute.

The inverse, starting with the classes collapse and in: Calculate the current height and set it to the style attribute. Add the class collapsing and remove the classes collapse and in. Change the height to 0 in the style attribute. At the end of the transition (by using a callback), remove the class collapsing, add the class collapse, and clear the style attribute. The hard part here is the transition end event.

It's really simple!

[GreggOD]

Just a note here guys, although what @witrin has said is totally plausible and great it must be known that animating height causes massive layout changes which is a heavy operation in the browser.

When doing animations you should always consider the cost of it, especially on mobile. I see people complaining about slow accordion animations on mobile. I mean if you consider what its doing you'll understand quickly why its slow.

Please Read: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ for a quick update on browser animations.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.