23 replies

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;

view-transition-name: nav;

on my

nav

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?

KP-C

Kevin Powell - Community•13mo ago•

23 replies

Tok124 (CSS Nerd)

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;

view-transition-name: nav;

on my

nav

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;
}

view-transition exclude navbar issue

Similar Threads

view-transition exclude navbar issue

Similar Threads

Similar Threads

Similar Threads