看见朋友写了一个动画选项,挺有趣的,于是就写了一个简易的
<template>
<div>
新增
<div class="page">
<el-button @click="testcss">点我</el-button>
<div class="box1" :class="{ an1: flag }">
图片
</div>
<div class="box2" :class="{ an2: flag }">
视频
</div>
<div class="box3" :class="{ an3: flag }">
文字
</div>
</div>
<div class="bg" :class="{ back: flag }">
<el-button @click="close">关闭</el-button>
</div>
</div>
</template>
<script>
export default {
name: "CloudManagerAddNewPoint",
data() {
return {
flag: false
};
},
mounted() {},
methods: {
testcss() {
this.flag = true;
},
close() {
this.flag = false;
}
}
};
</script>
<style lang="scss" scoped>
.bg {
display: none;
}
.back {
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba($color: #000000, $alpha: 0.2);
}
.page {
position: relative;
top: 400px;
left: 400px;
}
.box1,
.box2,
.box3 {
position: absolute;
left: 20px;
top: 10px;
width: 0;
height: 0;
overflow: hidden;
z-index: 999;
text-align: center;
}
.box1 {
background-color: pink;
}
.box2 {
background-color: wheat;
}
.box3 {
background-color: palegreen;
}
.an1,
.an2,
.an3 {
border-radius: 50%;
}
.an1 {
animation: ant1 linear 0.6s forwards;
}
.an2 {
animation: ant2 linear 0.6s forwards;
}
.an3 {
animation: ant3 linear 0.6s forwards;
}
@keyframes ant1 {
0% {
width: 0;
height: 0;
}
100% {
width: 50px;
height: 50px;
transform: rotateZ(360deg) translateX(60px) translateY(40px);
}
}
@keyframes ant2 {
0% {
width: 0;
height: 0;
}
100% {
width: 50px;
height: 50px;
transform: rotateZ(360deg) translateX(-10px) translateY(-80px);
}
}
@keyframes ant3 {
0% {
width: 0;
height: 0;
}
100% {
width: 50px;
height: 50px;
transform: rotateZ(360deg) translateX(-80px) translateY(40px);
}
}
</style>
效果如下