要实现一个类似于下图的效果，十个标签从中间随机出现的动画效果，若没有十个则按定义位置出现
1.将十个标签都固定在中心位置，通过class,并且动态生成标签颜色
<div class="nodata-icon" v-if="figIsShow">
<div v-if="customerIcon[0]" class="divstart"><span :style="{background:returnColor(customerIcon[0])}">{{ customerIcon[0].name }}</span></div>
<div v-if="customerIcon[1]" class="divstart"><span :style="{background:returnColor(customerIcon[1])}">{{ customerIcon[1].name }}</span></div>
<div v-if="customerIcon[2]" class="divstart"><span :style="{background:returnColor(customerIcon[2])}" >{{ customerIcon[2].name }}</span></div>
<div v-if="customerIcon[3]" class="divstart"><span :style="{background:returnColor(customerIcon[3])}">{{ customerIcon[3].name }}</span></div>
<div v-if="customerIcon[4]" class="divstart"><span :style="{background:returnColor(customerIcon[4])}" >{{ customerIcon[4].name }}</span></div>
<div v-if="customerIcon[5]" class="divstart"><span :style="{background:returnColor(customerIcon[5])}">{{ customerIcon[5].name }}</span></div>
<div v-if="customerIcon[6]" class="divstart2"><span :style="{background:returnColor(customerIcon[6])}">{{ customerIcon[6].name }}</span></div>
<div v-if="customerIcon[7]" class="divstart2"><span :style="{background:returnColor(customerIcon[7])}" >{{ customerIcon[7].name }}</span></div>
<div v-if="customerIcon[8]" class="divstart2"><span :style="{background:returnColor(customerIcon[8])}">{{ customerIcon[8].name }}</span></div>
<div v-if="customerIcon[9]" class="divstart2"><span :style="{background:returnColor(customerIcon[9])}">{{ customerIcon[9].name }}</span></div>
</div>
<script>
returnColor (str){
return str=>{
if(str['key']==='custPolicyCnt'||str['key']==='custApdpremCur'||str['key']==='numChild'||str['key']==='lastJoinOfflineActiv'){
return '#1C8EFF'
}
else if(str['key']==='assetLevel'||str['key']==='investType'||str['key']==='preference'){
return '#025CEA'
}
else if(str['key']==='consumeLevel'||str['key']==='cusValue'||str['key']==='ifIns'){
return '#FA6400'
}else{
return '#1C8EFF'
}
}
},
</script>.divstart{ opacity: 0; width:0px; height: 0px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .divstart2{ opacity: 0; width:0px; height: 0px; top: 50%; right: 50%; transform: translate(-50%, -50%); }
<style>
</style>
2.处理数据数组customerIcon，固定标签出现的位置，再动态绑定动画效果
<div class="nodata-icon" v-if="figIsShow">
<div v-if="customerIcon[0]" class="divstart" :style="returnAnimation(customerIcon[0].time,customerIcon[0].animate)"><span :style="{background:returnColor(customerIcon[0])}">{{ customerIcon[0].name }}</span></div>
<div v-if="customerIcon[1]" class="divstart" :style="returnAnimation(customerIcon[1].time,customerIcon[1].animate)"><span :style="{background:returnColor(customerIcon[1])}">{{ customerIcon[1].name }}</span></div>
<div v-if="customerIcon[2]" class="divstart" :style="returnAnimation(customerIcon[2].time,customerIcon[2].animate)"><span :style="{background:returnColor(customerIcon[2])}" >{{ customerIcon[2].name }}</span></div>
<div v-if="customerIcon[3]" class="divstart" :style="returnAnimation(customerIcon[3].time,customerIcon[3].animate)"><span :style="{background:returnColor(customerIcon[3])}">{{ customerIcon[3].name }}</span></div>
<div v-if="customerIcon[4]" class="divstart" :style="returnAnimation(customerIcon[4].time,customerIcon[4].animate)"><span :style="{background:returnColor(customerIcon[4])}" >{{ customerIcon[4].name }}</span></div>
<div v-if="customerIcon[5]" class="divstart" :style="returnAnimation(customerIcon[5].time,customerIcon[5].animate)"><span :style="{background:returnColor(customerIcon[5])}">{{ customerIcon[5].name }}</span></div>
<div v-if="customerIcon[6]" class="divstart2" :style="returnAnimation(customerIcon[6].time,customerIcon[6].animate)"><span :style="{background:returnColor(customerIcon[6])}">{{ customerIcon[6].name }}</span></div>
<div v-if="customerIcon[7]" class="divstart2" :style="returnAnimation(customerIcon[7].time,customerIcon[7].animate)"><span :style="{background:returnColor(customerIcon[7])}" >{{ customerIcon[7].name }}</span></div>
<div v-if="customerIcon[8]" class="divstart2" :style="returnAnimation(customerIcon[8].time,customerIcon[8].animate)"><span :style="{background:returnColor(customerIcon[8])}">{{ customerIcon[8].name }}</span></div>
<div v-if="customerIcon[9]" class="divstart2" :style="returnAnimation(customerIcon[9].time,customerIcon[9].animate)"><span :style="{background:returnColor(customerIcon[9])}">{{ customerIcon[9].name }}</span></div>
</div>
<script>
returnAnimation (time,animate){
return (time,animate)=>{
return `animation: fadenum${time} 1s 1 ;animation-delay: ${animate}s;animation-fill-mode:forwards`
}
},
//处理数组，固定位置
dealCustomerIcon (customerIcon){
const len = customerIcon.length
this.customerIcon = Array(10).fill(null)
if(len===1){
this.fillCustomerIcon(customerIcon,[0])
}
if(len===2){
this.fillCustomerIcon(customerIcon,[2,9])
}
if(len===3){
this.fillCustomerIcon(customerIcon,[3,8,9])
}
if(len===4){
this.fillCustomerIcon(customerIcon,[1,3,7,9])
}
if(len===5){
this.fillCustomerIcon(customerIcon,[0,1,3,7,9])
}
if(len===6){
this.fillCustomerIcon(customerIcon,[0,1,3,5,7,9])
}
if(len===7){
this.fillCustomerIcon(customerIcon,[0,1,3,5,7,8,9])
}
if(len===8){
this.fillCustomerIcon(customerIcon,[0,1,3,4,5,7,8,9])
}
if(len===9){
this.fillCustomerIcon(customerIcon,[0,1,2,3,4,5,7,8,9])
}
if(len===10){
this.fillCustomerIcon(customerIcon,[0,1,2,3,4,5,6,7,8,9])
}
},
fillCustomerIcon (target,arr){
arr.forEach((item,index)=>{
//随机出现位置
this.customerIcon[item] = target[index]
//每个位置出现的时间
this.customerIcon[item]['animate'] = index
})
this.customerIcon.forEach((item,index)=>{
if(!!item&&item.name!==''){
//位置动画
item['time'] = index
}
})
},
</script>@keyframes fadenum0{ 0%{ width: 0px; height: 0px; opacity: 0; } 100%{ width: 32%; height: 28px; opacity: 0.9; top: -120px; } } @keyframes fadenum1{ 0%{ max-width: 0px; height: 0px; opacity: 0; } 100%{ width: 32%; height: 28px; opacity: 0.9; top: -80px; left: 275px; } } @keyframes fadenum2{ 0%{ max-width: 0px; height: 0px; opacity: 0; } 100%{ width: 32%; height: 28px; opacity: 0.9; top: -40px; left: 285px; } } @keyframes fadenum3{ 0%{ max-width: 0px; height: 0px; opacity: 0; } 100%{ width: 32%; height: 28px; opacity: 0.9; top: 0; left: 285px; } } @keyframes fadenum4{ 0%{ max-width: 0px; height: 0px; opacity: 0; } 100%{ width: 32%; height: 28px; opacity: 0.9; top: 40px; left: 275px; } } @keyframes fadenum5{ 0%{ max-width: 0px; height: 0px; opacity: 0; } 100%{ width: 32%; height: 28px; opacity: 0.9; top: 80px; } } @keyframes fadenum6{ 0%{ width: 0px; height: 0px; opacity: 0; } 100%{ width: 32%; height: 28px; opacity: 0.9; top: 40px; right: 160px; } } @keyframes fadenum7{ 0%{ width: 0px; height: 0px; opacity: 0; } 100%{ width: 32%; height: 28px; opacity: 0.9; top: 0; right: 170px; } } @keyframes fadenum8{ 0%{ max-width: 0px; height: 0px; opacity: 0; } 100%{ width: 32%; height: 28px; opacity: 0.9; top: -40px; right: 170px; } } @keyframes fadenum9{ 0%{ max-width: 0px; height: 0px; opacity: 0; } 100%{ width: 32%; height: 28px; opacity: 0.9; top: -80px; right: 160px; } }
<style>
</style>
期间还有许多可以优化的，欢迎找我讨论
标签：opacity,name,环形,height,width,圆形,div,0px,customerIcon From： https://www.cnblogs.com/lijun12138/p/17070382.html