一、 效果
二、代码
1.用 li 来做每个气泡
<div class="dataSea_middle_bottom">
<ul>
<li
v-for="(item,index) in keyBusiness"
:key="index"
class="pops animal"
>
<p class="fb">{{ item.name}}</p>
<p>{{ item.num}}</p>
</li>
</ul>
</div>
2.js部分
getList(){ //获取数据接口
.....
this.clearAllTimer();
http.getList({}).then(res => {
this.$nextTick(() => {
this.setAnimation();
});
})
.....
}
//设置动画
setAnimation() {
let lis = document.getElementsByClassName("pops"); //气泡数据的个数
for (let i = 0; i < lis.length; i++) {
const el = lis[i];
// el.style.animationDelay = Math.floor((i + 1) / 6) * 8 + "s";//8s每次放6个
// 动画延迟时间 每次放多少个 * 大概延迟多少秒
el.style.animationDelay =
Math.floor((i + 1) / 1) * 1 + "s"; //每秒放1个
//TODO left是5-95之间的随机数
el.style.left = this.getRandomNumber(1, 75) + "%";
//TODO 动画总时间是5-7之间的随机数
// el.style.animationDuration = this.getRandomNumber(5, 7) + "s";
el.style.animationDuration = "5s";
//以上气泡个数、动画时间、偏移距离根据实际调整
// 第二种方法
this.endOrStart(el, lis.length, i);
}
},
// 第二种结束
endOrStart(el, lengths, index) {
const style = getComputedStyle(el);
const animationDuration = parseFloat(style.animationDuration);
const animationDelay = parseFloat(style.animationDelay);
const seconds = (animationDuration + animationDelay) * 1000;
let _this = this;
let timer = setTimeout(function () {
el.classList.remove("animal");
_this.endIndex += 1;
if (lengths == _this.endIndex) {
_this.endIndex = 0;
let keyBusiness = _.cloneDeep(_this.keyBusiness);
_this.keyBusiness = [];
setTimeout(() => {
_this.keyBusiness = keyBusiness;
_this.$nextTick(() => {
// console.log('第二轮');
_this.clearAllTimer();
_this.setAnimation();
});
}, 100);
}
}, seconds);
_this.timers.push(timer);
},
// 清除所有定时器
clearAllTimer() {
for (let i = 0; i < this.timers.length; i++) {
clearTimeout(this.timers[i]);
this.timers[i] = null;
}
this.timer = [];
},
// 随机数
getRandomNumber(a, b) {
return Math.floor(Math.random() * (b - a + 1)) + a;
},
3.css
.dataSea_middle_bottom {
width: 100%;
height: 90%;
}
@keyframes mymove {
0% {
opacity: 1;
bottom: 0rem;
transform: scale(0.2);
}
100% {
opacity: 0.9;
/* bottom: 35rem; */
/* bottom: 20rem; */
bottom: 80%;
transform: scale(1);
}
}
ul {
position: relative;
width: 100%;
height: 100%;
color: #fff;
padding: 0;
}
li {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
width: 5rem;
height: 5rem;
background-size: cover;
text-align: center;
cursor: pointer;
}
p {
width: 5rem;
text-align: center;
margin: 0;
padding: 0;
font-size: .75rem;
}
.animal {
animation: mymove;
}
li:nth-child(2n) {
background-image: url("~@/assets/newDataOcean/bluePop.png");
color: #0072FF;
}
li:nth-child(2n + 1) {
background-image: url("~@/assets/newDataOcean/greenPop.png");
color: #00A63C;
}
li:nth-child(odd) {
animation-delay: calc(1s * (1 - 1) / 2);
}
li:nth-child(even) {
animation-delay: calc(1s * (2 - 1) / 2);
}