AccordionBlock: use height transition instead of css only solution

[SebiVPS]

Description

Because the css solution with margin-top: -100%; could potentially made some problems we fall back to the default ref height transition animation.

[nsams]

👎 for a non-css-only solution in starter

[johnnyomair]

IMO a toggle between display: none and display: block would be acceptable as well 🤷🏼‍♂️

[johnnyomair]

Waiting for a decision here: #416 (comment)

[jamesricky]

👎 for a non-css-only solution in starter

I somewhat agree, but I don't know of another reliable way of achieving this.
And since we likely need this is 99% of projects I'd prefer this over just showing/hiding with display: none/block.

[nsams]

I don't know of another reliable way of achieving this.

Setting the inline height has so many disadvantages (and bugs) - we really must give our best to avoid that.

See here for possible solutions:
https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css

The max-height idea seems pretty clever.

[SebiVPS]

Setting the inline height has so many disadvantages (and bugs) - we really must give our best to avoid that.

@nsams can you explain this? I do not know these.

The max-height idea seems pretty clever.

The max-height solution has other problems (trade offs). The transition is always towards the max-height (smaller heights are not animated properly). What do we set for max-height - any content can be inserted into the accordion item?

I am no css expert, when @mariokemetinger, @jamesricky or @johnnyomair have any other, more solid, solution feel free to talk to me :)

[nsams]

can you explain this? I do not know these.

if the content changes it's height (other than window resize) the inline height won't be updated

[nsams]

The max-height solution has other problems

right. The stackoverflow question has 46 answers, maybe some other is working for us.

[jamesricky]

The max-height idea seems pretty clever.

The max-height solution has other problems (trade offs). The transition is always towards the max-height (smaller heights are not animated properly). What do we set for max-height - any content can be inserted into the accordion item?

I am no css expert, when @mariokemetinger, @jamesricky or @johnnyomair have any other, more solid, solution feel free to talk to me :)

Animating height using the max-height method is a bad solution imo.
The animation speed differs depending of the size of the content, easing does't work properly and this causes a limit to the height of the content.

[SebiVPS]

if the content changes it's height (other than window resize) the inline height won't be updated

@nsams correct me if i'm wrong, but i think there is no such case in the starter, where the content can change it's height. I think for now, this solution is working for us/the starter, better than the current one. (also most used in our projects).
If you want, @thomasdax98 can make an analyze task to find a more robust solution also respecting height changes of the content?

[nsams]

correct me if i'm wrong, but i think there is no such case in the starter, where the content can change it's height.

This is the starter, that starts anything you can't imagine. That's why I say it's an Okish solution for an project where you can argue that no content can change it's height. But not for starter.

Have you looked at the other 45 answers?

An alternative solution might be to unset the inline style after the animation completed. I don't know how easy that is nowadays.

We need to evaluate if we can find a CSS-only solution.