Re: [csswg-drafts] [css-view-transitions-2] CSS only way to transition between list <-> detail views (#8209)

I’m thinking of a new pseudo to indicate _“hey, this was the element that initiated the cross-document navigation”_ to solve this problem.

I’m using `:last-active` here, but the name is definitely up for bikeshedding:

```css
a:last-active {
  /* This applies to the link that activated a navigation */
}
```

Using `:last-active`, authors can conditionally declare `view-transition-name` values. In the example below only the `.card` – one of many – that contains the link that was actually clicked will set `view-transition-name` values on its elements.

```css
.overview .card:has(a:last-active) {
  h2 {
    view-transition-name: title;
  }
  img.hero {
    view-transition-name: hero;
  }
}

#detail {
  h1 {
    view-transition-name: title;
  }
  header img {
    view-transition-name: hero;
  }
}
```

_(This new pseudo is needed because the regular `:active` cannot be used, as the clicked element becomes inactive again upon navigation)_

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


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

Received on Friday, 25 August 2023 15:32:02 UTC