.qbox와 .answerlist에도 넘어갈 때 fadein, fadeout 애니메이션 효과 주는 방법
animation.css
@keyframes fadeIn {
from { opacity:0; }
to { opacity:1; }
}
@keyframes fadeOut {
from { opacity:1; }
to { opacity:0; }
}
/* 크롬은 webkit */
@-webkit-keyframes fadeIn {
from { opacity:0; }
to { opacity:1; }
}
@-webkit-keyframes fadeOut {
from { opacity:1; }
to { opacity:0; }
}
/* fadeIn이라는 클래스를 가지면 */
.fadeIn{
animation:fadeIn;
animation-duration: 1s;
}
.fadeOut{
animation:fadeOut;
animation-duration: 1s;
}
fadeIn, fadeOut클래스에 대한 정의 해주기
animation-duration기억하기
start.js(애니메이션 부분)
// qbox, answerlist에 애니메이션 넣기 위해 클래스 만들어주기
answer.classList.add('fadeIn');
// html의 onclick 역할의 addEventListener
answer.addEventListener("click", function(){
// 버튼 하나만 클릭해도 모든 버튼이 사라지도록 함
var children = document.querySelectorAll('.answerlist');
for(let i=0; i< children.length; i++){
children[i].disabled =true;
children[i].style.WebkitAnimation = "fadeOut 1s";
children[i].style.Animation = "fadeOut 1s";
}
// 버튼이 사라지고 950초쯤 이후 버튼 없어지게
setTimeout(() => {
for(let i=0; i< children.length; i++){
children[i].style.display = 'none';
}
goNext(++qIdx);
}, 950)
}, false);
}
1)main css에 있던 애니메이션 가지고오기
main.style.webkitAnimation에서 긁어와서 children[i].style.webkitAnimation으로
(+당연히 밑에줄도 main.style.Animatio에서 긁어와서 수정)
2)바로 사라지면 안되니까 setTimeout 사용해서 버튼이 서서히 fadeout후 사라지기
3)그리고 goNext하기
qna css
#qna{
display:none;
}
.qbox{
background-color:whitesmoke;
text-align: center;
border-radius: 20px;
font-size: 24px; ;
width: 80%;
}
.answerlist{
background-color: whitesmoke;
border-radius: 20px;
/* 버튼 한 줄씩 부여 */
display: block;
width: 80%;
/* 검은색 테두리 없도록 */
border:0px;
font-size: 20px;
}
/* 버튼이 마우스 위에 올려졌을 때 */
.answerlist:hover, .answerlist:focus{
background-color: pink;
color:whitesmoke;
}
css 버튼 세로로 배열하기
- 기본적으로 버튼은 가로로 세팅됨. display : block;을 통해서 세로로 배열
css 검은색 테두리 없애기
- 검은색 테두리를 없애려면 border:0px;
css 마우스가 인식하는 효과
- hover, focus{}