답변 에 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;
}
Author And Source
이 문제에 관하여(답변 에 fadeIn 효과), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@drv98/답변-에-fadeIn-효과저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)