html - CSS smooth animation for new elements added in a scroll list

Question

I was looking for an animation that smoothens the scroll process when a new element is added into a scroll list.

Example: When a new element comes to the list, my code catches the newest element and puts it into a scroll list. New elements are added to the top and the old elements are pushed to the bottom. My code is very static and I would like to see the animation of the "push" to be smooth and the elements that overflow need to be blurred below. How can we achieve this?

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>

question from:https://stackoverflow.com/questions/65857001/css-smooth-animation-for-new-elements-added-in-a-scroll-list

Answer 1

You can always just animate the height property from 0 to whatever the end value should be (in this case 80px).

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>