답변 에 fadeIn 효과

start.js

function addAnswer(answerText, qIdx) {
  var a = document.querySelector('.answerBox');
  var answer = document.createElement('button');
  a.appendChild(answer);
  answer.textContent = answerText;
  answer.className = "answerList my-3 py-3 mx-auto";
  answer.classList.add('fadeIn');
  //answer.addEventListener('click', e => console.log(e));
  answer.addEventListener('click', (e) => {
    //console.log(e.target.parentNode);
    let buttons = e.target.parentNode.querySelectorAll('*');
    //buttons.forEach(n => console.log(n));
    sleep(500);
    buttons.forEach(n => n.remove());
    goNext(++qIdx);
  });
}

function sleep(ms) {
  const wakeUpTime = Date.now() + ms;
  while (Date.now() < wakeUpTime) { }
}

qna.css

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.fadeOut {
  animation-name: fadeOut;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

좋은 웹페이지 즐겨찾기