[JavaScript] 要素を上から落ちるように表示させる方法

特定の要素を上から順々に表示していく。

デモ

実装

.poping {
  transform: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hide {
  opacity: 0;
  transform: translateY(-150%);
}

let target = document.querySelectorAll(".poping");
let count = 1;

Array.from(target, (el) => {
  setTimeout(() => {
    el.classList.remove("hide");
  }, 400 * count++);
});