Fluid animation using CSS for recently added elements in a scrolling list

Question

Fluid animation using CSS for recently added elements in a scrolling list

I've been searching for a way to create a smooth animation effect when a new element is added to a scrolling list.

For example, as a new element is added to the top of the list and older elements are pushed down, I want the transition to be visually pleasing. Specifically, I would like the "push" animation to be smooth and any overflowing elements should be blurred out below. How can this be accomplished?

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

Answer 1

Answer №1

One option is to animate the height property starting from 0 and ending at a specific value, such as 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>

Answer 2

One option is to animate the height property starting from 0 and ending at a specific value, such as 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>

Fluid animation using CSS for recently added elements in a scrolling list

Answer №1

Similar questions

Navigating to Angular components within a statically hosted S3 application

Exploring the inner function within Angular using jasmine testing

Step-by-step guide on incorporating a climate clock widget into your Angular project

Having trouble converting customized tabs into Bootstrap navigation tabs?

Displacement occurs when the input tag is eliminated

Examining form functionalities: angular2 form testing

What is the best way to send an array of locationIds to the getLocationData service?

Showing user data in a div using JavaScript ajax without the use of jQuery

Angular 4 - Custom global error handler fails to capture Http errors

Automatically refresh a pair of pages in sequence

What could be causing my CSS to malfunction when I include two parameters in app.get?

Combine various HTTP requests in Angular using RxJS, ensuring that the outer request is emitted immediately

Responsive HTML5 audio player adjusts size when viewed on mobile devices

Achieving a layered effect with elements overlapping onto another div

Setting a variable in Angular after a successful AJAX call

Eliminate all blank spaces at the top and bottom of Span by squishing it

Adjust the color of the label when the checkbox is marked, and make it red when the checkbox is left

The slider class in the div is not showing the image, but it is visible in the elements

Is there a way to populate two mysql tables using just one textarea input?

Discovering the required rotation angle for an object to directly face another using JS HTML5 CANVAS