css - How can I apply a view-transition to my sidebar only? - Stack Overflow

I'm talking about the new view-transition API for multi-page apps (MPA): /@view-transition

I put

@view-transition {
  navigation: auto;
}

In my main CSS file, and put view-transition-name: sidebar; on my sidebar element; I thought the view transitions would apply to elements with names, but it apparently it cross-fades the entire page.

How can I limit the effect to just my sidebar, but still work automatically when clicking an <a> (i.e. without JS startViewTransition)?

I'm talking about the new view-transition API for multi-page apps (MPA): https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition

I put

@view-transition {
  navigation: auto;
}

In my main CSS file, and put view-transition-name: sidebar; on my sidebar element; I thought the view transitions would apply to elements with names, but it apparently it cross-fades the entire page.

How can I limit the effect to just my sidebar, but still work automatically when clicking an <a> (i.e. without JS startViewTransition)?

• css

Share Improve this question Follow asked yesterday mpenmpen 282k280280 gold badges886886 silver badges1.3k1.3k bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

From the MDN:

The view-transition-name CSS property provides the selected element with a distinct identifying name (a <custom-ident>) and causes it to participate in a separate view transition from the root view transition — or no view transition if the none value is specified.

The root view transition (the whole page) is implicit and you cannot really remove it unless you update its animation to none

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

And you probably need to define another animation for your sidebar

::view-transition-old(sidebar),
::view-transition-new(sidebar) {
  animation: ...;
}