Java script

[자바스크립트, css] animation효과 (animation-duration, setTimeout), css에서 마우스 인식하는 효과 만들기

뉴라코 2024. 11. 26. 22:00
.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{}