상단 메시지 만들기

주석으로 갈음한다🥺

// 새로 만들어진 message에 active class를 붙였다가 2초후에 뗀다.
const asyncAlert = async (node) => {
  node.classList.add("active");
  const promise = new Promise((res) => {
    setTimeout(() => {
      node.classList.remove("active");
      res(node);
    }, 2000);
  });
  const resolved = await promise;
  alerts.removeChild(resolved);
};

// activateAlert가 호출되면, 새로운 element를 생성, dom에 붙이고, asyncAlert를 호출한다.
const activateAlert = () => {
  const newAlert = document.createElement("div");
  newAlert.setAttribute("class", "alert");
  newAlert.innerText = "추가되었습니다.";
  alerts.append(newAlert);
  asyncAlert(newAlert);
};

/* alert의 default 상태는  visibility : hidden */
.alert {
  visibility: hidden;
}

/* .active가 붙으면 animation을 실행한다. */
.alert.active {
  visibility: visible;
  /* 0.5s간 fadein 실행, 1.5초 delay를 갖고 0.5초간 fadeout 실행 */
  animation: fadein 0.5s, fadeout 0.5s 1.5s forwards;
}

/* 
  - 상단에서 내려오는 효과를 위해 translateY로 효과를 주었다. 
  - opacity 0 -> 1 
*/
@keyframes fadein {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*
  - 상단으로 빨려 올라가는 효과를 위해 height을 0으로 바뀌게 하였고, translaye(-10px)을 되돌렸음
  - opacity 1 -> 0
*/
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: translateY(-10px);
    height: 0;
    opacity: 0;
  }
}