chengfei-test-system/src/views/main/components/layout.vue

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

<template>
  <div class="layout">
    <router-view v-slot="{ Component }">
      <transition name="fade" appear>
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<style scoped lang="scss">
.layout {
  position: relative;
  height: calc(100vh - $main-header-height);
  flex: 1;
  background-color: var(--gray-bg-1);
}

.fade-leave-active,
.fade-enter-active {
  transition: all 0.3s;
}

/* 可能为enter失效，拆分为 enter-from和enter-to */
.fade-enter-from {
  opacity: 0;
  transform: translateY(-30px);
}
.fade-enter-to {
  opacity: 1;
  transform: translateY(0px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>