$router-animation-timer: 0.15s;
$router-animation-distance: 2em;

.slide-right-enter {
  transform: translateX($router-animation-distance);
}

.slide-left-enter {
  transform: translateX(-$router-animation-distance);
}

.slide-right-enter,
.slide-left-enter {
  opacity: 0;
}

.slide-right-enter-active,
.slide-left-enter-active {
  transition: all $router-animation-timer $router-animation-timer;
}

.slide-right-leave-active,
.slide-left-leave-active {
  transition: all $router-animation-timer;
  opacity: 0;
}

.slide-right-leave-active {
  transform: translateX(-$router-animation-distance);
}

.slide-left-leave-active {
  transform: translateX($router-animation-distance);
}