Adding items to list with animation

by ShaCP

HTML

<div id="container">
<div class="child">
</div>
</div>
<button id="add-child">
add child
</button>

CSS

#container {
  max-width: max-content;
  /*   max-height: 700px; */
  overflow: auto;
  display: inline-grid;
  row-gap: 0.25em;
}

.child {
  width: 300px;
  height: 150px;
  background-color: lightskyblue;
  text-align: right;
  opacity: 1;
  transition: 1s opacity;
}

#add-child {
  top: 8px;
  left: 325px;
  position: sticky;
  top: 0;
}

* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 12px;
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}

.new {
  opacity: 0 !important;
}

JavaScript

const container = document.querySelector("#container");
const addChildButton = document.querySelector("#add-child");

addChildButton.addEventListener("click", e => {
const lastChildrenCount = container.children.length;
console.log(lastChildrenCount);
container.innerHTML += `
<div class="child new"></div>
`
const interval = setInterval(() => {
console.log("interval");
if (lastChildrenCount !== container.children.length) {
container.lastElementChild.classList.remove("new")
clearInterval(interval);
}
}, 10)
})