<template>
  <div class="content-zone">
    <RouterView #="{ Component }">
      <Transition name="page-change">
        <component :is="Component"/>
      </Transition>
    </RouterView>
  </div>
</template>

<script lang="ts" setup>
</script>

<style lang="stylus" scoped>
.content-zone {
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 0 4px 0 var(--wh-border-color);
}

.page-change-enter-active,
.page-change-leave-active {
  transition: all .3s ease-in;
}

.page-change-enter-from {
  transform: translateX(-50px);
  opacity: 0;
}

.page-change-enter-to,
.page-change-leave-from {
  transform: translateX(0);
  opacity: 1;
}

.page-change-leave-to {
  transform: translateX(50px);
  opacity: 0;
}

</style>
