console
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>点击页面全屏扩展过渡效果</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta name="renderer" content="webkit">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-size: 14px;
font-family: -apple-system, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
color: #27282b;
background: #eee;
}
a {
text-decoration: none;
color: #27282b;
}
*,
*::before,
*::after {
outline: none;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
background: #eee;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.tran-box {
width: 100px;
height: 100px;
border-radius: 55%;
opacity: 0;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.tran-box.anim {
animation: anim1 .5s linear backwards;
}
@keyframes anim1 {
10% {
opacity: 1;
}
100% {
opacity: 1;
transform: scale(40, 40);
}
}
</style>
</head>
<body>
<div class="wrapper" id="app" :style="{'background-color': cacheBgColor}">
<div class="tran-box" :class="{anim: isAnim}" :style="tStyle"></div>
</div>
<script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
<script>
const R = {
randColor() {
return '#' + ('00000' + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6)
},
timeout(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
}
const vm = new Vue({
el: '#app',
data() {
return {
aList: [],
initX: 0,
initY: 0,
isAnim: false,
timer1s: 0,
curBgColor: '#31a0eb',
cacheBgColor: R.randColor(),
}
},
computed: {
tStyle() {
return {
'background-color': this.curBgColor,
'top': this.initY - 50 + 'px',
'left': this.initX - 50 + 'px'
}
},
},
mounted() {
window.addEventListener('click', (e) => {
clearTimeout(this.timer1s)
this.timer1s = setTimeout(async () => {
this.initX = e.clientX
this.initY = e.clientY
this.curBgColor = R.randColor()
this.isAnim = true
await R.timeout(450)
this.cacheBgColor = this.curBgColor
this.isAnim = false
}, 30)
})
},
})
</script>
</body>
</html>