Re: [csswg-drafts] [css-anchor-1] Transitioning when the anchor element with a given name changes (#8181)

Yep – Transitioning the inset properties or being able to use those values in calc to generate `transform` values would be super useful. The demo in question is this one 👇 

https://user-images.githubusercontent.com/842246/205658978-489b6590-bbbf-44ee-a1d2-cd369c32db88.mp4

It shows a use case where you might want an element to follow user interaction. Not one I'd throw into production anytime soon 😅 

But it works using `:has()` to update and `--active-anchor` custom property (this did work in ~108).

```css
:root {
  --active-anchor: --email;
  --active-left: anchor(var(--active-anchor) right);
  --active-top: anchor(var(--active-anchor) center);
}

:root:has(.form-group:focus-within) {
  --anchor-scale: 1;
  --anchor-transition: top 0.2s, left 0.2s, transform 0.2s;
}

#password {
  anchor-name: --password;
}

:root:has(#password) {
  --active-anchor: --password;
}
```

A combination of implicit anchor and transition could also be useful in a variety of tooltip/overlay scenarios too. Even those type trigger UI where like on here when you type `#` to get the dropdown (What is the technical name for that pattern? 😅 )

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


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

Received on Monday, 5 December 2022 14:25:57 UTC