vue-有初始化動畫的節點進度條的實作

總結最近做的一個可視化大屏項目用到的節點進度條，用vue語句+css代碼實作的帶有初始化動畫效果

先看下效果（不會弄動圖，實際實作是帶初始化動畫的）

1.先寫html結構

解釋一下層級：最外層div是一整個狀态進度條；裡面span是狀态文字，div是進度條；進度條div裡面 i 标簽寫節點小圓點，div寫長方形的進度條。因為要加初始化動畫，是以節點和進度要分開寫。

直接看代碼

<div class="rate_sch">
  <span v-for="countText in item.handleSituType" :key="countText" >{{statusText[countText]}}</span>
  <div class="status_con">
    <i class="status_dot" v-for="count in item.handleSituType" :key="count"></i>
   	<div class="status_bar"></div>
  </div> 
</div>
           

span标簽和 i 标簽需要用v-for循環寫，因為頁面顯示幾個文字和幾個小圓點要根據狀态處于第幾個節點決定。item.handleSituType 這個值就是背景接口傳過來的數字類型的1/2/3/4節點狀态。

狀态的文字（預警，接收，處置，完成）固定為四個不變，是以可以放在一個數組（statusText[]）裡去周遊；因為v-for在用數字循環的時候第一個數值是1，是以數組的第1位（statusText[0]）需要是空字元‘’。

2.添加css樣式

根據狀态确定狀态文字的顔色，css代碼：

.rate_sch span{ font-size: 18px; display: inline-block; width: 84px; text-align: center;}

.textcolor1{ color: #ff567a;}
.textcolor2{ color: #ffe956;}
.textcolor3{ color: #4effae;}
.textcolor4{ color: #64f6ff;}
           

整個進度條有相同的暗色背景，不同狀态的節點個數和顔色不一樣，進度條的長度和顔色不一樣

.status_con{width: 290px; margin: 0 auto; height: 20px; background:url(../../../../static/images/screen/state.png) no-repeat; background-position:0 0; position: relative;}

.status_bar{ width: 6px; background-color: #ff567a; height: 5px; position: absolute; top: 10px; left: 10px;}
.status_bar1{ width: 6px; background-color: #ff567a;}
.status_bar2{width: 90px; background-color: #ffe956;}
.status_bar3{width: 176px; background-color: #4effae;}
.status_bar4{width: 262px; background-color: #64f6ff;}

.status_dot{ width: 12px; height: 12px; border-radius: 12px; display: inline-block; position: absolute; top: 6px; left:6px;}
.status_dot1{ left: 6px;}
.status_dot2{ left: 96px;}
.status_dot3{ left: 182px;}
.status_dot4{ left: 270px;}
           

給每一個進度增加初始化動畫，配合transition和transition-group标簽一起應用，注意名字一一對應。

.fadebar-enter { width: 6px;}
.fadebar-enter-active { transition: all 2s;}

.fade-enter { left: 6px;}
.fade-enter-active { transition: all 2s;}
           

3.完整的html代碼

<div class="rate_sch">
  <span v-for="countText in item.handleSituType" :key="countText" :class="'textcolor'+item.handleSituType">{{statusText[countText]}}</span>
  <div class="status_con">
       <transition-group name="fade" appear>
           <i class="status_dot" v-for="count in item.handleSituType" :key="count" :class="['bgcolor'+item.handleSituType,count==1?'status_dot1':'',count==2?'status_dot2':'',count==3?'status_dot3':'',count==4?'status_dot4':'',]"></i>
      </transition-group>
      <transition name="fadebar" appear>
           <div class="status_bar" :class="'status_bar'+item.handleSituType"></div>
      </transition>
  </div> 
</div>