Wildcard transition names in selectors

[matthewp]

This blog post explains how you might add separate view-transition-names when operating on a list. Like so:

<div class="posts">
{% foreach post in posts %}
  <a style="view-transition-name: post-{{ post.id }}" href="{{ post.url }}">{{ post.title }}</a>
{% endforeach %}
</div>

Notice here that this creates a dynamic view-transition-name per anchor. I don't think there is a way to then style these transitions old/new views. You can't currently do:

::view-transition-old(post-*) {
  animation: fade 0.2s linear forwards;
}

Maybe there's another/better way to do this?

[jakearchibald]

This is discussed over in w3c/csswg-drafts#8319

[matthewp]

Thanks!