Re: [csswg-drafts] [css-view-transitions-2] Creating 'classes' of transition groups (#8319)

In terms of old/new classes, here's how it can happen:

```js
const element = document.querySelector('.whatever');
element.style.viewTransitionName = 'foo';
element.style.viewTransitionClass = 'class-before';

document.startViewTransition(() => {
  element.style.viewTransitionClass = 'class-after';  
});
```

The above will result in `::view-transition-group(foo)`, but the question is which of the classes can be used to select that group?

https://github.com/w3c/csswg-drafts/issues/8319#issuecomment-1852207709 proposes `class-after` only.

But in this case:

```js
const element = document.querySelector('.whatever');
element.style.viewTransitionName = 'foo';
element.style.viewTransitionClass = 'class-before';

document.startViewTransition(() => {
  element.remove();
});
```

https://github.com/w3c/csswg-drafts/issues/8319#issuecomment-1852207709 proposes `class-before` works.

This pattern could be summarised as "last captured classes win".

@noamr in this case:

```js
const element = document.querySelector('.whatever');
element.style.viewTransitionName = 'foo';
element.style.viewTransitionClass = 'class-before';

document.startViewTransition(() => {
  element.style.viewTransitionClass = 'none';
});
```

…assuming `none` unsets the value, the group would have no classes. Is that right?

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


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

Received on Wednesday, 13 December 2023 10:51:50 UTC