Home

I have following page structure:

/pages
–users.vue [ contains ]
–/users
----index.vue
----_id.vue [ transition: ‘slideRight’ ]

I have a simple fade transition applied to users.vue page.

/* PAGE TRANSITIONS */
.page-enter-active, .page-leave-active {
  transition: all .25s ease-out;
}
.page-enter, .page-leave-active {
  opacity: 0;
  transform-origin: 50% 50%;
}

For users/_id.vue page a I have set a page transition “slideRight” from vue2-animate.css.

.slideRight-enter-active, .slideInRight, .slideRight-leave-active, .slideOutRight {
  animation-duration: 0.25s;
  animation-fill-mode: both;
}
.slideRight-enter-active, .slideInRight {
  animation-name: slideInRight;
}
.slideRight-leave-active, .slideOutRight {
  animation-name: slideOutRight;
}
@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}

When I navigate to localhost:3000/users/123 the child route slides in from right as expected. But when I navigate back to localhost:3000/users then child view is applied fade animation of parent users.vue view?

How can I achieve that child _id.vue view would slideOut. I thought this would be the expected behaviour with my setup above.

Thanks