Re: [csswg-drafts] [css-anchor-position][css-position] Fixing the animation problem (#9598)

> <fantasai> TabAtkins: our implementers think something similar to this is going to work

Yes, but as we've discussed before internally Tab, I don't like the very animation-specific feel of this, nor the magic behavior of `magic`, which serializes as one thing, but "is" another thing. We may have precedent for this, but it feels like a last resort. So I'll propose a tweak to what has been discussed so far. "Boring", because it's less magical.

Boring Position Package
--------

The position/size of the element can be affected by many things:

- left, right, top, bottom
- align-self, justify-self
- inset-area
- sizing properties

But ultimately, it must result in a rect [X,Y,W,H] in some reference frame.

Perhaps we can give the author the power to optionally override this [X,Y,W,H] with a new property, tentatively called `extent` (is that available?). The `extent` property is the thing which _actually_ determines the used position/size of the element, it just happens to resolve to the aforementioned [X,Y,W,H] by default.

`extent: normal | auto | <length>{4}`

- `normal`
  - Initial value. Computes to `normal`.
  - The extent is whatever came out of insets/alignment/sizing, i.e. [X,Y,W,H].
- `auto`
  - Computes to Xpx Ypx Wpx Hpx.
  - This means `auto` is resolved into pixels by "style interleaving", and that transitions can happen whenever `auto` changes to something else.
- `<length>{4}`
  - Computes to those lengths, in pixels. Using this means that inset/alignment/sizing properties don’t actually affect the result.
  - The main purpose of this is not for direct author use, but as interpolated values generated by animation effects.

Unanswered question: What is [X,Y] relative to? (We have to answer this question also for the non-boring position package).

The above would not affect what we need to implement, nor the problems we need to solve vs. the non-boring position package, but I think this results in a less magical API.

Usage:

```
extent: auto;
transtion: extent 1s;
```


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


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

Received on Friday, 16 February 2024 11:25:05 UTC