score:1

.down .transition-enter {
  transform: translateY(100vh);
}

.down .transition-enter-active {
  position: unset;
  transform: translateY(0);
  transition: transform 1000ms ease-out;
}

.down .transition-exit {
  top: 0;
  position: absolute;
  transform: translateY(0);
}

.down .transition-exit-active {
  transform: translateY(-100vh);
  transition: transform 1000ms ease-out;
}


.up .transition-enter {
  position: unset;
  transform: translateY(-100vh);
}

.up .transition-enter-active {
  position: unset;
  transform: translateY(0);
  transition: transform 1000ms ease-out;
}

.up .transition-exit {
  top: 0;
  position: absolute;
  transform: translateY(0);
}

.up .transition-exit-active {
  transform: translateY(100vh);
  transition: transform 1000ms ease-out;
}

Related Query

More Query from same tag