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

> In the interest of making the most common use cases simple and easy, while still making other things possible, what if we accepted this syntax, but also said that if the second argument is omitted, then it is equivalent to writing size as the second argument?

Hmm, we could, but I'm not super confident it would be a net win in readability. It's already a little tricky to explain the behavior different between `calc-size(50%, size)` and `calc-size(any, 50%)`; allowing it to be written with a single argument (`calc-size(50%)`) would, I'd be afraid, just complicate matters further.

> I'd also think that we could say any valid calc() argument would be equally valid for either argument of calc-size. In addition to valid calc() syntax, you could also do everything you described.

That's already the case, yes. The first argument is allowed to be a `<length-percentage>`, and the second argument doesn't *have* to use the `size` keyword at all.

> Together, these would make calc-size as easy to use as calc, with some restrictions on how to use intrinsic lengths in interpolations, and the ability to add a second argument for doing slightly more advanced stuff.

Ah, and this is precisely why I think it wouldn't be a win to allow a single-argument calc-size().

If you transition from `calc-size(50%)` to `calc-size(0px)` (aka `calc-size(50%, size)` to `calc-size(0px, size)`), the intermediate result is `calc-size(25%, size)`. That will resolve to whatever `25%` resolves to in this context; if it's a cyclic percentage, this behaves as `auto`. This means *the entire transition* will behave as auto, and not actually "transition" at all; it'll just flip to 0 after a delay equal to the transition duration.  What you *want* to write is `calc-size(50%, size)` to `calc-size(any, 0px)` (or just `0px`), so the intermediate result is `calc-size(50%, size * .5)` and you get a smooth transition down to zero.

Similarly, if you wanted something to be "100%, but 20px smaller", writing `calc-size(100% - 20px)` will, in the case of a cyclic percentage, behave identically to `100%` - it won't be any smaller. You actually want to write `calc-size(100%, size - 20px)`.

I think requiring people to write the `, size` part will make it at least *somewhat* more likely that they can get the transitions right in the first place.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 26 December 2023 19:14:35 UTC