클릭시 CSS3 키 프레임 애니메이션 (addClass 사용). css 클래스를 추가하여 CSS3 애니메이션을 다시 시작하는 방법은 무엇입니까?

Question

문제가 있습니다. Bounce.js를 사용하여 멋진 메뉴 애니메이션을 만듭니다 (몇 가지 멋진 효과 포함). 다시 시작하는 데 문제가 될 수있는 CSS 키 프레임 애니메이션을 사용하는 Bounce.js. 메뉴가 있는데 버튼을 클릭하면 .show 클래스가 추가되면 애니메이션이 실행됩니다. 그러나이 버튼을 다시 누르면 hide 클래스가 hide 애니메이션 (이전 애니메이션의 역 버전)과 함께 추가되어야합니다.

Js가 작동하지만 (클래스가 올바르게 추가되고 제거됨) 애니메이션이 한 번만 실행되며 숨기기 애니메이션이 없습니다. 메뉴 요소가 사라지고 애니메이션이 사라집니다.

Answer 1

당신은 serval 방식으로 할 수 있습니다.

한 가지 방법은 요소에 애니메이션 클래스를 추가하기 전에 요소의 재 흐름을 트리거하는 것입니다. 예를 들어

element.offsetWidth = element.offsetWidth; 

(바닐라 JS)

if (element2.classList.contains('show')) { 
     element2.classList.remove("show"); 
     //restarting css3 keyframe animation 
     **element2.offsetWidth = element2.offsetWidth;** 
     element2.classList.add("hide"); 
    }else{ 
     element2.classList.remove("hide"); 
     //restarting css3 keyframe animation 
     **element2.offsetWidth = element2.offsetWidth;** 
     element2.classList.add("show"); 
    } 

의 jQuery 버전 : 그것은 여기

if(settingPopup.hasClass('show')){ 
     settingPopup.removeClass('show'); 
     //line below is a fix to restart css3 keyframe animation 
     //settingPopup.outerWidth(settingPopup.outerWidth) 
     settingPopup.outerWidth(settingPopup.outerWidth).addClass('hide'); 
    }else{ 
     settingPopup.removeClass('hide'); 
     //line below is a fix to restart css3 keyframe animation 
     //settingPopup.outerWidth(settingPopup.outerWidth) 
     settingPopup.outerWidth(settingPopup.outerWidth).addClass('show'); 
    } 

있고 작동 바이올린 : https://jsfiddle.net/zpawpvke/2/

기준 : https://css-tricks.com/restart-css-animation/