通過 javascript 點擊觸發 CSS Animation

Question

我有一個簡單的漢堡包圖標，我想通過純 javascript 點擊觸發 CSS animation（請不要 jquery）。 I am doing this by adding and removing a class on hamburger icon when I add the class the CSS animation is happening however when I remove the class the animation is not happening, the hamburger line is coming back abruptly without animating. 基本上我希望 animation 反轉並回到原來的 position。

這是代碼：

 var hamburgerMenu = document.querySelector('.hamburger-menu'); hamburgerMenu.addEventListener('click', function() { var hamburgerMenuSpan2 = document.querySelector('.hamburger-second'); hamburgerMenuSpan2.classList.toggle('hamburger-line-2'); });

 .hamburger-menu { position: absolute; top: 20px; right: 20px; }.hamburger-line-2 { animation-name: animate; animation-duration: 3s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-direction: alternate; } @keyframes animate { 0% { width: 40px; } 100% { width: 0px; } }.hamburger-menu span { display: block; width: 40px; height: 2px; background: black; margin: 10px 0px; }

 <div class="hamburger-menu"> <span class="hamburger-line-1"></span> <span class="hamburger-second"></span> <span class="hamburger-line-3"></span> </div>

基本上，我希望漢堡圖標線在點擊時變為 0px 寬度，持續時間，然后每當用戶再次點擊時，我希望漢堡圖標線從 0 開始變為原始寬度。

Answer 1

有點難看，因為需要額外的 class ，但它有效：

 var hamburgerMenu = document.querySelector('.hamburger-menu'); hamburgerMenu.addEventListener('click', function() { var hamburgerMenuSpan2 = document.querySelector('.hamburger-second'); if (hamburgerMenuSpan2.classList.contains("animate-out")) { hamburgerMenuSpan2.classList.remove("animate-out"); hamburgerMenuSpan2.classList.add("animate-in"); } else { hamburgerMenuSpan2.classList.add("animate-out"); hamburgerMenuSpan2.classList.remove("animate-in"); } });

 .hamburger-menu { position: absolute; top: 20px; right: 20px; }.hamburger-line-2 { animation-duration: 3s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-direction: alternate; }.animate-out { animation-name: animate-out; }.animate-in { animation-name: animate-in; } @keyframes animate-out { 0% { width: 40px; } 100% { width: 0px; } } @keyframes animate-in { 0% { width: 0px; } 100% { width: 40px; } }.hamburger-menu span { display: block; width: 40px; height: 2px; background: black; margin: 10px 0px; }

 <div class="hamburger-menu"> <span class="hamburger-line-1"></span> <span class="hamburger-second hamburger-line-2"></span> <span class="hamburger-line-3"></span> </div>

Answer 2

如果您可以自由使用 CSS transition ，那么這可能是一個很好的解決方案。

 var hamburgerMenu = document.querySelector('.hamburger-menu'); hamburgerMenu.addEventListener('click', function() { var hamburgerMenuSpan2 = document.querySelector('.hamburger-second'); if (hamburgerMenuSpan2.classList.contains('low-width')) { hamburgerMenuSpan2.classList.remove('low-width'); } else { hamburgerMenuSpan2.classList.add('low-width'); } });

 .hamburger-menu { position: absolute; top: 20px; right: 20px; }.hamburger-second { transition: width 3s ease-in-out; }.low-width { width: 0px;important. }:hamburger-menu span { display; block: width; 40px: height; 2px: background; black: margin; 10px 0px; }

 <div class="hamburger-menu"> <span class="hamburger-line-1"></span> <span class="hamburger-second"></span> <span class="hamburger-line-3"></span> </div>