<div>
  <button class="button">Button</button>
</div>
<div class="container">

</div>
<template class="template">
  <div class="comment"></div>
</template>
.animation-init {
  opacity: 0;
}

.animation-fade {
  opacity: 1;
  transition: all 1s;
}

let count = 0;

document.querySelector(".button").onclick = function () {
  const container = document.querySelector(".container");
  const template = document.querySelector(".template");
  const newTemplate = document.importNode(template.content, true);

  newTemplate.querySelector(".comment").textContent =
    "새 글을 추가했습니다. " + count++;
  container.prepend(newTemplate);

  // animation
  const newComment = document.querySelector(".comment");
  newComment.classList.add("animation-init");
  setTimeout(function () {
    newComment.classList.add("animation-fade");
  }, 30);
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.