Re: [csswg-drafts] [css-view-transitions-2] Use `@starting-style` to customize initial/final states of content pseudos (#10789)

> Not sure I understand this, do you have some sample equivalent code of what this is trying to achieve?

Of course!
I put a slightly better example in a [codepen](https://codepen.io/noamr/pen/XWLBXyN).
Let's say I have a counter, that uses view-transitions to animate when changing the number:
```html
<output style="view-transition-name: counter">0</output>
```

By default, changing the number would crossfade using opacity. If I want, instead, to have the old number slide out to the left and the new number to to slide in, I have to do this:
```css
@keyframes slide-out { 
  to { translate: -100%; } 
}
@keyframes slide-in { 
  from { translate: -100%; } 
}
:root::view-transition-old(counter) { 
  animation-name: slide-out; 
}
:root::view-transition-new(counter) { 
  animation-name: slide-in; 
}
```

I want to be able to do this using `@starting-style` instead:
```css
output {
  @starting-style {
     translate: -100%;
  }
}
```


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


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

Received on Wednesday, 28 August 2024 08:52:13 UTC