Nuxt scroll up before page transition-CodePudding

I have created a transition to be run between route changes:

.page-enter-active {
  position: absolute;
  width: 100%;
  //max-height: 100vh;
  overflow: hidden;
  animation: slideScaleRight 2s ease;
}
.page-leave-active {
  position: absolute;
  width: 100%;
  //max-height: 100vh;
  overflow: hidden;
  animation: scaleSlideRight 2s ease;
}

@keyframes scaleSlideRight {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(0.75) translateX(0);
    opacity: 0.5;
  }
  66% {
    transform: scale(0.75) translateX(150%);
  }
  100% {
    transform: scale(0.75) translateX(150%);
  }
}

@keyframes slideScaleRight {
  0% {
    transform: scale(0.75) translateX(-150%);
  }
  33% {
    transform: scale(0.75) translateX(-150%);
  }
  66% {
    opacity: 0.5;
    transform: scale(0.75) translateX(0);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}

The transition run smooth but I just discover that if the page is not at top position, before leaving, nuxt force an scroll to the top making the experience really bad...

I can guess nuxt is scrolling up before triggering the transition and I really would like to keep the page where it is before leaving.

Any ideas?

CodePudding user response：

You could set scrollToTop: false on an upper page (or even in /layouts/default.vue?) to prevent the scrolling of the page as shown in the documentation.

If you want more granularity, you could also look into scrollBehavior.