.translateY-enter {
  animation: translate-in $transition-duration-m $transition-function-ease-out;
}

.translateY-leave-to {
  animation: translate-out $transition-duration-m $transition-function-ease-out;
}

.translateY-in {
  animation: translate-in $transition-duration-m $transition-function-ease-out;
}

.translateY-out {
  animation: translate-out $transition-duration-m $transition-function-ease-out;
}

@keyframes translateY-in {
  0% {
    opacity: 0;
    transform: translateY(128px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes translateY-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(128px);
  }
}