Home

I have a use case where I’m building a mobile-like UI. One of my Nuxt pages is supposed to slide up over the current content (akin to a panel) when navigated to, and slide down when navigating away. I set the transition mode to “in-out” so the current view does not transition out until the pane has slid up fully, but when navigating away from the pane, there’s no animation at all.

I have something like so for the CSS:

.panel {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
.panel-enter-active {
  animation: slideUp 350ms cubic-bezier(0.42, 0, 0.58, 1) forwards;
}
.panel-leave-active {
  animation: slideDown 350ms cubic-bezier(0.42, 0, 0.58, 1) forwards;
}

@keyframes slideUp {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideDown {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}

This is even the case if I set the other pages transition to in-out, there still isn’t any kind of transition. I can’t think of any other way to have a panel (as a page) slide up and down over another page.

Edit: Repo demonstrating the issue — https://bitbucket.org/syropian/nuxt-transition-bug

To reproduce go from the panel page to the home page or “other” page to the home page, and notice how they don’t animate out.