JavaScript automatically add and delete

extract a number as a row from"{success: true,data: ["aPermian 92", "brece0", "cpence0", "dpjence43", "ePerce0", "fmeme80", "gpower0", "hgrade50", "jPower20", "kPower5"]}". The page can only display 8 lines. For each additional line, you need to delete the previous line and add a new line, and you need to mount the deleted animation. Is there a big boss to give me a solution

Mar.14,2021

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];
});

I think we can use a two-dimensional array to store
use Array.shift () to delete the first array
use Array.unshift () to add a new array


it's easy to strip out the numbers, just add split in a loop

Animation effects can be achieved by controlling the class name

write you a demo

    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  // 
    const second = 0.5  // 

    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)
          }
    })
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c30567-33cec.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c30567-33cec.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?