Post

Anoesj
@anoesj.dev

Forgot to mention that the transition is done with Vue's <Transition> component (adds active + from/to classes, listens to transitionend events). I hoped transform-origin would work in the @position-try clause, but it doesn't seem to. Or transform-origin: anchor(top) anchor(left); Any ideas?

Kevin Powell
@kevinpowell.co

transform origin is only if you are using transforms, like scale, translate, skew, rotate... but the zoom would be happening from scale, I'm assuming, so when the position-area is bottom, I'd have the transform-origin: top, and vice versa for when it's anchored to the top.

Anoesj
@anoesj.dev

Yes, there are scale transitions in place here using Vue's <Transition> mechanism. I didn't screenshot them before, sorry for the unclarity. However, transform-origin does not (seem to) work in a @position-try clause 😕 github.com/w3c/csswg-dr...

0 reposts0 likes

Kevin Powell
@kevinpowell.co

Ah, yeah, I get it now. That's one of the big limitations of them at the moment. I do know the level 2 parts are looking to add more awareness of where on another element something in anchored, so hopefully that helps.