main.vue

<template>
  <transition name="logo-fade">
    <div style="align:center" v-show="show">
      <span style="font-size:100px;margin-top:15%;margin-bottom:0;margin-left:auto;margin-right:auto;background-color:black;color:white;width:622px;display:block">合同管理系统</span>
      <img src="../assets/logo.png" alt="">
    </div>
  </transition>
</template>
<script>
  export default {
    data() {
      return {
        show: false
      };
    },
    mounted() {
      this.show = true;
    }
  };
</script>

<style scoped>
.logo-fade-enter-active {
  transition: all 3.5s ease;
}
.logo-fade-enter {
  opacity: 0;
}
</style>