https://blog.canopas.com/animations-with-css-and-vue-transitions-fdb53dbb21e7 - slider-animation-3

slider-animation-3.vue

<style lang="scss" scoped>

// translate image to 120% to right when image is entering to transition
.image-next-enter-active {
  transform: translate(120%);
}

//stop transform when image has entered from right
.image-next-enter-to {
  transform: translate(0%);
}

// hide image when it is leaving from transition
.image-next-leave-active {
  display: none;
}

// translate image to -120% to left when image is entering to transition
.image-prev-enter-active {
  transform: translate(-120%);
}

//stop transform when image has entered from left
.image-prev-enter-to {
  transform: translate(0%);
}

// hide image when it is leaving from transition
.image-prev-leave-active {
  display: none;
}
</style>