JavaScript自動添加刪除

剝離出數(shù)字很簡單，循環(huán)加split就可以了

動畫效果可以通過控制類名來實現(xiàn)

給你寫個demo

    #lists li{
      opacity: 0;
    }

    #lists .list{
      opacity: 1;
      transition: opacity 0.5s linear;
    }

    #lists .delete{
      animation: delete 0.5s ease-in-out forwards;
    }

    #lists .hide{
        display: none;
    }

    @keyframes delete
    {
      0% {color: red; text-decoration:line-through; opacity:1;}
      100% {opacity:0;}
    }

    let arr = ["a,92","b,0","c,0","d,43","e,0","f,80","g,0","h,50","j,20","k,5"]

    const lists = document.getElementsByTagName('body')[0].appendChild(document.createElement("ul"))
    lists.setAttribute("id", "lists")

    const num = 8  // 限制顯示的條數(shù)
    const second = 0.5  // 每條數(shù)據(jù)的動畫時長

    arr.map((v, i) => {
          let li = document.createElement("li")
          li.innerHTML = v.split(',')[1]
          li.style.transitionDelay = i * second + 's'
          lists.appendChild(li)
          
          setTimeout(() => {
            li.classList.add('list')
          }, 0)
            
          if(i > (num - 1)) {
            let deleteLi = document.getElementById('lists').getElementsByTagName('li')[i - num]
            deleteLi.classList.add("delete")
              
            let delay = [i - 1] * second
            deleteLi.style.animationDelay = delay + 's'
            
            setTimeout(() => {
              deleteLi.classList.add("hide")
            }, (delay + second) * 1000)
          }
    })

let data = {success: true,data: ["a,92","b,0","c,0","d,43","e,0","f,80","g,0","h,50","j,20","k,5"]};

let col = data.data.map((v) => {
  return v.split(',')[1];
});

我覺得可以用二維數(shù)組存儲
使用Array.shift()刪除第一個數(shù)組
使用Array.unshift()添加新數(shù)組