标签：position 动画 app tom view 看到了 rip city animation
// qq音乐app观看mv的时候评论推送动画 看到了实现一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>js 评论列表推送动画系列一</title> <style> .box { width: 400px; height: 400px; border: 1px solid #ccc; margin: 0 auto; position: relative; overflow: hidden; } ul { list-style: none; margin: 0; padding: 0; position: absolute; bottom: 20px; left: 20px; } li { border-radius: 20px; line-height: 40px; border: 1px solid #ccc; position: absolute; transition: all 1s; padding: 0 20px; margin: 0; opacity: 0; bottom: -40px; opacity: 0; color: #666; max-width: 0; height: 0px; white-space: nowrap; } .active { max-width: 300px; height: 40px; opacity: 1; animation: fade 2s linear 3s forwards; } @keyframes fade{ from { opacity: 1; } to { opacity: 0; } } </style> </head> <body> <div class="box"> <ul class="list"></ul> </div> <script> var parent = document.getElementsByClassName(‘list‘)[0] var num = 0 var t = setInterval(() => { num++ var para = document.createElement("li");//获取父节点 para.innerHTML = ‘醉赤壁好听 +‘ + num parent.insertBefore(para, parent.children[0]);//添加至父节点内 var list = document.getElementsByTagName(‘li‘) if (list.length > 6 ) { parent.removeChild(parent.lastChild) } for (let i = 0; i < list.length; i++) { const element = list[i]; element.style.bottom = (52 * (i - 1)) + ‘px‘ if (i === 1) { element.classList.add(‘active‘) } } }, 1000) </script> </body> </html>
标签：position 动画 app tom view 看到了 rip city animation
原文地址：https://www.cnblogs.com/lyz4444/p/11094417.html
