How to animate a transition from one Vue component to the same component (with a different parameter) using router?

Question

I have a Vue 2 application. It uses router to manage pages. On one page, you can click to go to the next page, and the next page is the same component. You can think of it like a folder page going to a new sub folder page. The URL is the mostly same, except for the folder ID.

I want this animated, so the new component slides in from the right, over-top the old page.

But I think the router likes to reuse the same component, so how can I make multiple pages of the same component?

Answer 1

You can use the key attribute on your component, keyed to the route's folder ID param so that every new page load causes Vue to re-render the component which should also trigger your animation.

codesandbox

<template>
  <div class="container">
    <Transition name="slide">
      <h1 class="text" :key="$route.params.id">Page {{ $route.params.id }}</h1>
    </Transition>
  </div>
</template>

.container {
  position: relative;
}
.text {
  position: absolute;
}
.slide-enter-active {
  animation: slide 1s;
}
.slide-leave-active {
  transition: all 1s;
  opacity: 0;
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes slide {
  0% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}