在vue-cli项目中添加页面启动页
<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>