W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2021

Re: [csswg-drafts] [css-transitions] Transition to height (or width) "auto" (#626)

From: Brian Birtles via GitHub <sysbot+gh@w3.org>
Date: Mon, 17 May 2021 23:23:38 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-842707084-1621293816-sysbot+gh@w3.org>
> The reason people want to transition the height is that they want to reclaim the layout space for other elements when the item is 'contracted'.

Right, so there are a number of ways to cover this.

A common one is to cache the bounding box top of each element in your container. Then, when you contract the item, you read off the updated bounding box top of each element later in the flow (and in the viewport) then add a transform animation to move them up into the contracted space.

It's quite a bit of work and sometimes you need to clamp the container height until the animation finishes but it's performant and you can stagger the transform animations to produce a more organic effect. By that point, though, you often want to use Web animations or the like because you can get away without forcing style flushes in order to trigger the effect.

I still animate the height for small animations though because it's so much easier and transitions have really nice interrupting behavior.

GitHub Notification of comment by birtles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/626#issuecomment-842707084 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 17 May 2021 23:23:53 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:33 UTC