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

noamr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-2] Use `@starting-style` to customize initial/final states of content pseudos ==
Currently, the default behavior for the content pseudo-elements (`::view-transition-old` and `::view-transition-new`) is to animate to/from `opacity: 0`. This is usually sufficient, and customizable by setting the pseudo-element style directly.
However, this means, for example, that custom cross-document exit transitions have to be defined in the new document.
Proposing that instead, we'd use the `@starting-style` for the old/new pseudo-element keyframes.

So for example given this CSS & script:
```css
.current { 
  @starting-style {
    scale: 0;
    opacity: 1;
  }
  view-transition-name: item;
}
```
```js
item1.classList.add("current");
document.startViewTransition(() => {
  item21classList.add("current");
  item2.classList.add("current");
});
```

Instead of the elements cross-fading, the old one would animate its scale to 0 and the new element would animate its scale from 0.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10789 using your GitHub account


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

Received on Tuesday, 27 August 2024 11:53:41 UTC