<template> <div id=”app”> // 启动页内容开始 <div class=”wrap” v-if=”show”> <div class=”pic1″> <img src=”@/assets/images/pic1.png” /> <img src=”@/assets/images/pic2.png” /> <img src=”@/assets/images/pic3.png” /> </div> </div> // 启动页内容结束 <keep-alive> <router-view v-if=”$route.meta.keepAlive” /> </keep-alive> <router-view v-if=”!$route.meta.keepAlive” /> </div> </template> <script> export default { name: ‘App’, data() { return { show: false } }, mounted() { // 判断页面是首次加载还是刷新 if (window.performance.navigation.type === 1) { console.log(‘页面被刷新’) } else { // 首次加载的话显示启动页内容，设置延时器再取消显示 console.log(‘首次加载’) this.show = true setTimeout(() => { this.show = false }, 4000) } } } </script> <style lang=”scss” scoped> #app { height: 100%; } // 启动页样式 .wrap { width: 100vw; height: 100vh; background: url(‘~@/assets/images/bg.png’) no-repeat center top #fff; background-size: cover; box-sizing: border-box; overflow: hidden; position: fixed; z-index: 2; } .wrap .pic1 { position: relative; width: 100%; top: 48px; } .pic1 img { opacity: 0; width: 21%; position: absolute; left: 48px; animation-name: fadeIn; /*动画名称*/ animation-duration: 1s; /*动画持续时间*/ animation-iteration-count: 1; /*动画次数*/ animation-delay: 0s; /*延迟时间*/ animation-fill-mode: forwards; } .pic1 img:nth-child(2) { left: 128px; top: 48px; animation-name: fadeIn; /*动画名称*/ animation-duration: 1s; /*动画持续时间*/ animation-iteration-count: 1; /*动画次数*/ animation-delay: 1s; /*延迟时间*/ animation-fill-mode: forwards; } .pic1 img:nth-child(3) { left: 208px; top: 48px; animation-name: fadeIn; /*动画名称*/ animation-duration: 1s; /*动画持续时间*/ animation-iteration-count: 1; /*动画次数*/ animation-delay: 2s; /*延迟时间*/ animation-fill-mode: forwards; } @keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% { opacity: 0; /*中间状态 透明度为0*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } } </style>
