console 命令行工具 X clear

console

var info = [{
    name: "胡杭",
    age: 16
},
{
    name: "胜明",
    age: 22
},
{
    name: "军毅",
    age: 21
},
{
    name: "晓华",
    age: 13
},
{
    name: "盛聪",
    age: 23
},
{
    name: "侦剑",
    age: 32
},
{
    name: "红翔",
    age: 25
},
{
    name: "超维",
    age: 18
},
{
    name: "士琪",
    age: 22
},
{
    name: "艳华",
    age: 20
}
];


let ul = document.querySelector("ul");
for(let i=0;i<info.length;i++){
    create_li(i);
}

setInterval(function(){
    //淡隐+取消过渡
    ul.style.opacity= "0";
    // ul.addEventListener("transitionend",function(){
    //     ul.style.transition="none";
    //     ul.appendChild(ul.firstElementChild);
    //     // ul.style.transform = "translateX(-100%)";
    //     getComputedStyle(ul).transition;
    //     getComputedStyle(ul).opacity;
    //     //添加过渡+淡现
    //     ul.style.transition="";
    //     ul.style.transform = "";
    //     ul.style.opacity= "1";
    // },{once:true})
    ul.style.transition="none";
    ul.appendChild(ul.firstElementChild);
    // ul.style.transform = "translateX(-100%)";
    getComputedStyle(ul).transition;
    getComputedStyle(ul).opacity;
    //添加过渡+淡现
    ul.style.transition="";
    ul.style.transform = "";
    ul.style.opacity= "1";
   
},3000)


function create_li(i){
let name = info[i].name;
let age = info[i].age
let li = document.createElement("li");
li.innerHTML=`<span>${name}</span><span>${age}</span>`;
ul.appendChild(li);
}

<!DOCTYPE html>
<html>
	<body>
        <div class="bg">
            <div class="box">
                <ul>
                </ul>
            </div>
        </div>
	</body>
</html>

*{
    margin: 0;
    padding: 0;
    list-style: 0;
}
.bg{
    width: 200px;
    background: linear-gradient(rgb(102,255,183),rgb(46,49,49));
    padding: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.box{
    height: 33px;
    background-color: white;
    overflow: hidden;
}
ul{
    transition: all 2s;
}
li{
    /* border: 2px dotted red; */
    display: flex;
    justify-content: space-around;
    padding:5px 0;
}