定位的div环形圆形排列

要实现一个类似于下图的效果,十个标签从中间随机出现的动画效果,若没有十个则按定义位置出现

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>

<style>
 .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>
复制代码

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>

<style>
  @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>
复制代码

 期间还有许多可以优化的,欢迎找我讨论

posted @   lijun12138  阅读(265)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示