<html>
<head>
<meta charset="utf-8">
</head>
<body>
<style>
* {
box-sizing: content-box
}
ul {
height: 80vh;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
}
li {
position: relative;
overflow: hidden;
padding: 0;
height: 70px;
width: 100%;
transition: height 6s linear;
}
li p {
opacity: 1;
transition: opacity 6s;
background: #666;
color:#fff;
line-height: 70px;
position: absolute;
height: 70px;
width: 100%;
bottom: 0
}
footer {
position: fixed;
bottom: 0;
}
</style>
<ul id="list">
<li><p>123</p></li>
<li><p>456</p></li>
<li><p>789</p></li>
</ul>
<footer>
<button onclick="add()">点击添加数据</button>
<button onclick="onScroll()">点击滚动->移除数据</button>
</footer>
<script>
const handle =(d) => {
const li = document.getElementsByTagName('li')[0];
li.removeEventListener('transitionend', handle)
li.parentNode.removeChild(li);
onScroll()
}
function add(){
const list = document.getElementById('list');
const li = document.createElement('li');
const p = document.createElement('p');
p.innerHTML = 'cbsidvbuav' + (Math.random() * 10).toFixed(2)
li.appendChild(p)
list.appendChild(li)
}
function onScroll(){
const lis = document.getElementsByTagName('li');
if(!lis?.length) {
return;
}
lis[0].addEventListener('transitionend', handle, false)
lis[0].style.height = 0
lis[0].children[0].style.opacity = 0.2
}
</script>
</body>
</html>
