滚动列表中添加的新元素的 CSS 平滑动画答案

【问题标题】：CSS smooth animation for new elements added in a scroll list滚动列表中添加的新元素的 CSS 平滑动画
【发布时间】：2021-04-27 14:51:53
【问题描述】：

我一直在寻找一种动画，可以在将新元素添加到滚动列表时平滑滚动过程。

示例：当列表中有一个新元素时，我的代码会捕获最新的元素并将其放入滚动列表中。新元素被添加到顶部，旧元素被推到底部。我的代码是非常静态的，我希望看到“推”的动画是平滑的，溢出的元素需要在下面模糊。我们怎样才能做到这一点？

CSS：

 .transactions-list {
        background-color: #eee;
        padding-top:0rem;
        width: 200px;
        height: 100px;
        border: 1px dotted black;
        overflow: scroll; /* Add the ability to scroll */
        -ms-overflow-style: none;
        scrollbar-width: none;
        border-radius: 1rem;
        direction: ltr;
      }

HTML：

<div class="transactions-list">
    <p *ngFor="let element of transactions.slice().reverse()">{{element}}</p>
</div>

【问题讨论】：

标签： html css angular scroll frontend

【解决方案1】：

您始终可以将 height 属性从 0 设置为任何最终值（在本例中为 80 像素）。

document.querySelector("button").addEventListener("click", function(){
  let li = document.createElement("li");
  li.innerHTML = "New Item";
  li.className = "new";
  let ul = document.querySelector("ul");
  ul.insertBefore(li, ul.firstChild);
});

ul
{
  display: block;
  width: 300px;
  height: 200px;
  
  list-style: none;
  
  overflow: auto;
}

li
{
  display: block;
  width: 100%;
  height: 80px;
  padding: 0 20px;
  box-sizing: border-box;
  
  background: red;
  
  margin: 1px 0;
  overflow: hidden;
}

li.new
{
  animation: grow 1s ease;
}

@keyframes grow
{
  0%
  {
    height: 0;
  }
  100%
  {
    height: 80px;
  }
}

<button>Add New Item</button>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

【讨论】：