CSSアニメーションクラスJSを使用しているときに点滅する

Question

ウィンドウが736px以下のときに表示されるモバイルメニューがあります。このメニューには、CSSを追加するjavascriptトグルがあり、モバイルメニューの起動と終了をアニメーション表示します。

モバイルメニューのサイズを変更してから、モバイルメニューを開いて閉じても問題はありません。その後、ウィンドウのサイズを変更した後、ドロップダウンメニューが1秒間点滅しますCSSメディアクエリーブレークポイント（736px）。

誰かが私にこれを助けることができれば、私はとても感謝しています。

**注：私はアニメートするためのメニューが必要です。そのため、mobileMenuActiveクラスを削除することはできません。

codepen：https://codepen.io/emilychews/pen/POeGaN

JS

var mobileMenuButton = document.getElementById("mobile-menu-button") 
var mobileMenuItems = document.getElementById("nav-menu-items") 

// TOGGLE MOBILE MENU 
var mobileMenu = false 

function toggleMobileMenu() { 

    if (mobileMenu === false) { 

     mobileMenuItems.classList.remove("mobileMenuInactive") 
     mobileMenuItems.classList.add("mobileMenuActive") 
     mobileMenuButton.innerHTML = "Close" 
     mobileMenu = true 

    } else { 

     mobileMenuItems.classList.add("mobileMenuInactive") 
     mobileMenuItems.classList.remove("mobileMenuActive") 
     mobileMenuButton.innerHTML = "Menu" 
     mobileMenu = false 

    } 
} 

mobileMenuButton.addEventListener("click", function() { 
    toggleMobileMenu() 
}, false) 

CSS

body, ul {padding: 0; margin: 0} 

/* --- DESKTOP MENU STYLING ---*/ 

#main-header {width: 100%; height: 100px;} 

#mobile-menu-button {display: none;} 

#main-navigation { 
    position: relative; 
    width: 100%; 
    height: 100px; 
    background: red; 
    display: flex; 
    justify-content: space-between; 
    box-sizing: border-box; 
    padding: 10px 5% 10px 5%; 
    align-items: center; 
} 

ul#nav-menu-items { 
    display: flex; 
    margin-left: auto; 
} 

#main-navigation ul li {list-style-type: none;} 

ul#nav-menu-items li a { 
    padding: 10px 15px; 
    margin: 0 5px; 
    box-sizing: border-box; 
    background: yellow; 
    text-decoration: none; 
    color:#000; 
} 

#main-navigation ul#nav-menu-items li a:hover { 
    color:blue; 
    transition: color .25s; 
} 

/* --- MOBILE MENU AND DROPDOWN ---*/ 

@media screen and (max-width : 736px) { 

    #main-navigation {justify-content: flex-end;} 

    #mobile-menu-button { 
    display: flex; 
    justify-content: center; 
    background: blue; 
    color: white; 
    padding: 10px 15px; 
    min-width: 75px; 
    cursor: pointer;} 

/* dropdown mobile menu */ 
    ul#nav-menu-items { 
    opacity: 0; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    min-width: 150px; 
    background: blue; 
    position: absolute; 
    right: 5%; 
    top: 100px; 
    padding: 10px 0px; 
    } 

    ul#nav-menu-items li { 
    padding: 10px 10px; 
    } 

    ul#nav-menu-items li a { 
    padding: 10px 15px; 
    color: white; 
    background: transparent; 
    } 

    ul#nav-menu-items li a:hover { 
    color: lightblue; 
    } 

/* -------- MOBILE CLASSES ADDED WITH JavaScript*/ 

#nav-menu-items.mobileMenuActive { 
    animation: showMobileMenu .5s ease-in forwards; 
} 

@keyframes showMobileMenu { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 

#nav-menu-items.mobileMenuInactive { 
    animation: removeMobileMenu .5s ease-out forwards; 
} 

@keyframes removeMobileMenu { 
    0% {opacity: 1;} 
    100% {opacity: 0;} 
} 

} /*END OF MOBILE MENU STYLING*/ 

HTML

<header id="main-header"> 
    <nav id="main-navigation"> 
    <ul id="nav-menu-items"> 
     <li class="menu-item menu-item-1"><a href="https://www.google.com">News</a></li> 
     <li class="menu-item menu-item-2"><a href="https://www.google.com">About</a></li> 
     <li class="menu-item menu-item-3"><a href="https://www.google.com">Contact</a></li> 
    </ul> 

<!-- button for triggering mobile nav --> 
    <div id="mobile-menu-button">Menu</div> 

    </nav> 
</header> 

Answer 1

オプションは、ウィンドウresizeイベントを使用し、mobileMenuInactiveクラスを削除することができます。 そして、 "メニュー"をクリックすると、あなたのコードがそれを再び追加します。

window.addEventListener('resize', function(){ 
    mobileMenuItems.classList.remove("mobileMenuInactive"); 
}); 

Answer 2

これはコード

をJS試してみてください

var mobileMenuButton = document.getElementById("mobile-menu-button") 
    var mobileMenuItems = document.getElementById("nav-menu-items") 

    // TOGGLE MOBILE MENU 
    var mobileMenu = false 

    function toggleMobileMenu() { 

     if (mobileMenu === false) { 
      mobileMenuItems.classList.add("mobileMenuActive") 
      mobileMenuButton.innerHTML = "Close" 
      mobileMenu = true 
     } else { 
      mobileMenuItems.classList.remove("mobileMenuActive") 
      mobileMenuButton.innerHTML = "Menu" 
      mobileMenu = false 
     } 

    } 

    mobileMenuButton.addEventListener("click", function() { 
     toggleMobileMenu() 
    }, false)