現(xiàn)在有需求要進行動畫的了列表渲染。
但是在寫的過程中發(fā)現(xiàn)了問題，不知如何解決

現(xiàn)有父組件，通過socket不停地獲取服務端傳遞過來的值，放入了數(shù)組中，然后將這個數(shù)組傳遞給子組件

          socket.onmessage = (event) => {
            const socketData = JSON.parse(event.data)
            if (socketData.type === 'wz') {
              this.wzSocket = socketData.data
            } else if (socketData.type === 'warn') {
              this.warningSocket.unshift(socketData.data)
            }
          }

這里采用的unshift 總是希望第一個進入數(shù)組的值出現(xiàn)動態(tài)效果。

子組件 對傳遞過來的數(shù)組進行列表過渡，但是發(fā)現(xiàn)如果key填入了item這個對象，后臺是會提報錯，key重復，以及不可以使用object來作為key,建議件采用string或者number。
所以這邊改成了index。

      <transition-group name="list" tag="span">
        <div v-for="(item,index) in warningData" :key="index" class="list-item">
          {{item.recordtime}} +{{index}}
          <el-button type="text" size="mini" @click="handleClickDetails(item)">詳情</el-button>
        </div>
      </transition-group>

現(xiàn)有效果：

渲染出來之后，如果key填入的是item對象，那么總是列表的第一個出現(xiàn)動畫效果，但是填入了index，就是依次出現(xiàn)動畫效果。如果使用方法去動態(tài)生成key。那么所有的都會出現(xiàn)動畫效果。

那么請問，怎么才能總是使得數(shù)組的第一個元素出現(xiàn)動態(tài)效果