vuejs 2 previous and next transition

Question

I\'m working on an image slider using Vue 2 transitions.

Here is what I have currently using Vue\'s documentation and Stackoverflow responses :

component :

Answer 1

You could set a conditional class on the $el to figure out if previous button was clicked.

Here i called it isSlidingToPrevious

sass

#slider {
  overflow: hidden;
}

.slide-leave-active,
.slide-enter-active {
  transition: 0.5s;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(-100%, 0);
}
.sliding-to-previous {
    // or whatever you like
    .slide-enter {
      transform: translate(-100%, 0);
    }
    .slide-leave-to {
      transform: translate(100%, 0);
    }
}