Есть ли способ сделать переход слайдов, который заставляет элементы опускаться ниже границы?

Делаю приложение Vue с двумя страницами, и я хочу добавить слайд-переход для моего маршрутизатора, где элементы скользят под границей. Удалось сделать переход слайда, но я не знаю, как заставить элементы идти ниже границы. (Граница в данном случае является границей для #app).

GIF текущего состояния: https://i.imgur.com/NKxM2Cn.gifv

<template>
  <div id = "app">
    <transition name = "slide" mode = "out-in">
      <router-view/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 1s ease-out;
}

.slide-enter {
  transform: translateX(-100%);
}

.slide-leave-to {
  transform: translateX(100%);
}

#app {
  width: 750px;
  height: 920px;
  border: 1px solid #A9A9A9;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
}
</style>