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

by

0👍

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

Leave a comment