CSS 애니메이션 재실행 안될때

A 요소를 클릭할때마다 B 요소가 움직이도록 만들고 싶은데... 

 

 

classList.remove('class');

classList.add('class');

 

만으로는 사용이 불가능 했다.

 

그럴때, 

 

 

 element.offsetWidth = element.offsetWidth;

 

 

를 사용하게 되면! 다시 컴파일링 되면서 animation이 동작함.

 

 

            let bat1 =  document.querySelector(".b1");
            let ddk = document.querySelector(".ddk");

            ddk.addEventListener("click", function() {
                bat1.classList.remove("goMove");
                bat1.offsetWidth = bat1.offsetWidth; //애니메이션 재사용위한 triggering  reflow
                bat1.classList.add("goMove");
            });

Javascript 코드

 

.goMove {
    animation: batMove;
    animation-duration: 1s;
}

@keyframes batMove {
    0% {
        transform: translate(0,0);
    }
    100% {
        transform: translate(2vh, 0vh);
    }
}

CSS 코드

 

 

다시한번 주의!!! 애니메이션 실행 잘 안되면.. offsetwidth 에 다시 offsetwidth 를 넣어주자!