Kevin Powell - Community•4d ago

view-transition exclude navbar issue

Hey, i am playing around with view-transition in CSS and i cannot really figure out this problem, when i use view-transition-name: nav; on my nav selector. nothing is being animated anymore when i click my links. But works just fine if i comment out this line... This is the code i have

@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: 1s;
}

::view-transition-old(root) {
  animation-name:slide-out;
}

::view-transition-new(root) {
  animation-name:slide-in;
}

@keyframes slide-in {
  from {
    translate:0 -100vh;
  }
}
@keyframes slide-out {
  to {
    translate:-100vw 0;
  }
}

nav {
  view-transition-name: nav;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: 1s;
}

::view-transition-old(root) {
  animation-name:slide-out;
}

::view-transition-new(root) {
  animation-name:slide-in;
}

@keyframes slide-in {
  from {
    translate:0 -100vh;
  }
}
@keyframes slide-out {
  to {
    translate:-100vw 0;
  }
}

nav {
  view-transition-name: nav;
}

Here is a link to the website https://000704893.deployed.codepen.website/ It worked just fine when kevin used it in his video but it does not work for me, i guess this must have been changed in some way since he made that video about view-transition?

18 Replies

clevermissfox•3d ago

Your syntax looks right , this project is an MPA not a SPA right ? And since you’re adding to the nav element it should work . Is there only one nav on the page ? I’m on mobile so can’t check your footer to make sure. Could try adding a class to your header nav (make sure it’s the same on every page if you’re redefining the markup and not using a component) and add the view transition name to the class. Ah yes looks like there’s a nav in your footer too . Every element needs a unique view transition name . For instance all h2s element selectors can’t just get view-transition-name : h2; Would have to loop through and be h2-1, h2-2, etc. so try giving your nav on the header a class to apply its name or an in-line style and it should work

Tok124 (CSS Nerd)OP•3d ago

Aaaahhhhh.... Yeah true ! I forgot that i had a nav in my footer too LoL Now it works, thank you soo much @clevermissfox i totally forgot i had a nav in the footer, i built this project about a month ago and then i figured out that it was a great project to try view-transition on so i just added that to the website and totally forgot that i had a nav in footer too lol

clevermissfox•3d ago

Yay glad it works ! Using ID selectors for view transition name might be one of the few times I’ll use IDs in css - since IDs and view transition names are unique to each page sounds like a match ! Then we can ensure each has its own name.

Tok124 (CSS Nerd)OP•3d ago

Yeah thats true, i never target id's in CSS but in this case it would actually make sense to do that yeah... But yeah what i did here was just to do body > nav {} So it selects only the nav that is direct child of body, not the one in footer

clevermissfox•3d ago

Same - I avoid it like the plague so that I have the silver bullet in case I need it and don’t raise specificity for no reason; when I need it, is usually to override framework or library’s selectors. Once @layer is supported that’s gonna make it even less common

Tok124 (CSS Nerd)OP•3d ago

@layer is supported. at least in edge, i believe in all cromium based browsers, not sure if its supported in FF

Tok124 (CSS Nerd)OP•3d ago

Oh yeah even FF supports it apparently

Tok124 (CSS Nerd)OP•3d ago

But yeah, i have been forced sometimes to target ids if im using some sort of library just because they have targeted an id and well, the only way to overwrite that is to also target the same or another id or do inline styling or !important, and to keep the specificity as low as possible, i would target the id in this case

clevermissfox•3d ago

I misspoke - it’s baseline to the point I use in my demos and codepens as most people looking at codePen will be on a modern browser. Since it’s not a progressive enhancement and will break everything if the browser doesn’t recognize I think it’ll be a bit until it’s implemented more eg Once it’s being used more frequently in production sites I should say

Tok124 (CSS Nerd)OP•3d ago

Yeah if @layer would not be supported that would definitely break everything 😂

clevermissfox•3d ago

And not worth using an @supports imo

Tok124 (CSS Nerd)OP•3d ago

Yeah can you even use @supports to check for support of @layer?

clevermissfox•3d ago

Although if you’re importing your stylesheets at least you wouldn’t have to write your styles twice I’m not sure 🤔

Tok124 (CSS Nerd)OP•3d ago

Yeah same, but i don't think you can hmm...

clevermissfox•3d ago

AI says yes - but would def have to test to check

@supports at-rule(@layer) {
  /* Code for browsers that support @layer */
}

@supports not at-rule(@layer) {
  /* Fallback for browsers without @layer support */
}

@supports at-rule(@layer) {
  /* Code for browsers that support @layer */
}

@supports not at-rule(@layer) {
  /* Fallback for browsers without @layer support */
}

Tok124 (CSS Nerd)OP•3d ago

Yeah. i remember the video kevin made when he asked a bunch of different AI's questions about CSS, soo much false information lol 😂 🤣

clevermissfox•3d ago

Their hallucinations are wild !! And even when it’s giving you right answers , still makes plenty of errors. Fed it some code to comment for me and it gave it back with comments but also changed one character in my selector which broke everything. It’s so unreliable that it’s scary when people use it but don’t know how to check the output; they get stuck as soon as there’s one error or ridiculous hallucination. More trouble than it’s worth for beginners- their time would be better spent just learning whatever they’re trying for a lot of the simple stuff

Tok124 (CSS Nerd)OP•3d ago

Yeah hahahha the only time i use AI is for JS, just because sure, i do have "some experience" with JS, but i have almost no interest at all in JS, i like writing JS for the html preprocessor pug, but other than that i really don't like it at all. I am only interested in CSS 😅

Gaming

Programming

view-transition exclude navbar issue

Did you find this page helpful?