bramus, 2 months ago

Say you have a View Transition with a bunch of cards but also a title on the page.

To animate all cards except the title, you had to write a selector that targets each and every individual card.

bramus, 2 months ago

Got 20 cards? That’s 20 selectors please.
Add a new card? You also need to inject extra CSS to animate that new card in a View Transition.

Very cumbersome and totally not scalable.

bramus, 2 months ago

With view-transition-class that becomes easier to do, as you can decorate a bunch of elements with that class.

Got 20 cards? Got 100 cards? The animation styles remain unchanged.

Add a new card? Also got you covered.

bramus, 2 months ago

Note that you still need a view-transition-name on every element, because View Transitions need to know which element is which.

👉 view-transition-class allows you to dedupe your VT animation code.

So the full code becomes this.

jpzwarte, 2 months ago

@bramus The wildcard is a little unusual *.card; before i saw that, i would have guessed without the * :)

bramus, 2 months ago

@jpzwarte We have an open CSSWG issue to allow you to ditch the *.

bramus, 2 months ago

@jpzwarte Resolved to make the * optional.

bramus, 2 months ago

FWIW: setting a unique view-transition-name on each card is something that you wouldn’t do in a CSS file. Typically you’d do via JS upon adding a card, our use a style attribute when using SSR.

So the actual code would not include all those view-transition-name declarations.

bramus, 2 months ago

(On a sidenote, we are looking into also allowing you to more easily/automatically add a view-transition-name to elements from within a style sheet … but more on that later 😉)

bramus, 2 months ago

Here’s a demo for you: https://view-transitions.netlify.app/cards/spa/

All the cards except the card that gets added/removed have a bounce easing.

For this I rely on view-transition-class on all cards. The card that is added/removed has a special view-transition-name with different animations.

Recording of the demo.

bramus, 2 months ago

view-transition-class is expected to ship in Chrome 125.

To use it today, launch Chrome with the --enable-blink-features=CSSViewTransitionClass flag to enable it.

bramus, 2 months ago

And oh, I’ve got more demos with experimental View Transition things up on https://view-transitions.netlify.app/ – Go check it out!

ryantownsend, 2 months ago

@bramus 👏 a fantastic improvement.

Do you happen to know if attr() work in a way to avoid using inline styles (which have a CSP impact)?

e.g.

.card {  
 view-transition-name: attr(data-view-transition-name)  
}  

ryantownsend, 2 months ago

@bramus looks like support has a long way to go... https://caniuse.com/css3-attr 😅

bramus, 2 months ago

@ryantownsend There’s a few ideas floating around, including attr() which you mention 🙂

Relevant CSSWG Issues:

• https://github.com/w3c/csswg-drafts/issues/9141
• https://github.com/w3c/csswg-drafts/issues/8320

ryantownsend, 2 months ago

@bramus thanks, will have a read!

Not sure if there's overlap here, but do you know of any work going towards allowing duplicate view-transition-names per page with MPAs?

For example, on lessonsofacto.com I have "Latest Episodes" and then collections of episodes beneath, so one card can appear twice on the home page.

I currently add the view-transition-name with JavaScript on click, which works for the forward navigation, but when navigating backwards this doesn't work.

bramus, 2 months ago

@ryantownsend For this you can use pageswap and pagereveal which are two new events.

The pageswap one fires just before the last frame, and the pagereveal one fires at the first rendering opportunity.

You do need to clean up things in those functions, to play nice with BFCache.

I’ve got a full post on it planned next month. For now, take a peek at https://view-transitions.netlify.app/profiles/mpa/ which uses these new events.

In the future, we hope to allow you to do this URL matching from within CSS.

berkes, 2 months ago

@bramus couldn't a class selector solve this?

bramus, 2 months ago

@berkes No, because you are not animating the elements themselves but you are animating snapshots of those elements.

Those snapshots need to be decorated with a name (which is comparable to an ID, using the view-transition-name property) and optionally a class (via view-transition-class).

There are parallels to draw between VT class and CSS classes: they apply to multiple elements and share some syntax; but that’s where it stops.