JS/CSS - 動畫手機菜單切換

與這個傢伙奮鬥，任何幫助將不勝感激！JS/CSS - 動畫手機菜單切換

試圖對_S主題的移動菜單進/出轉換進行動畫處理。

由於內容是使用vanilla JS動態生成的，因此無法真正製作JSFiddle。

這似乎是核心JS用於切換移動類的.toggled「在移動菜單圖標點擊：

button.onclick = function() { 
    if (-1 !== container.className.indexOf('toggled')) { 
     container.className = container.className.replace(' toggled', ''); 
     button.setAttribute('aria-expanded', 'false'); 
     menu.setAttribute('aria-expanded', 'false'); 

    } else { 
     container.className += ' toggled'; 
     button.setAttribute('aria-expanded', 'true'); 
     menu.setAttribute('aria-expanded', 'true'); 
    } 
};

我已經設法到目前爲止動畫的唯一方式是使用CSS關鍵幀在.main-navigation.toggled類中顯然只有在動畫中，該類在第二次點擊時被移除並恢復爲僅隱藏在此屏幕尺寸的.main-navigation。

理想情況下想要通過JS/JQUERY使用類似於.slideToggle或.fadeToggle的動畫，但正如我所說的努力使這項工作。

對於其他使用_S主題的編碼器應該很有用，因爲它試圖在最新版本中自定義.main-navigation.js。

很多預先感謝！

來源

2017-06-19 EasterMedia

我面臨同樣的問題，它讓我瘋狂了三天。我最終使用CSS3 Transition獲得了「動畫」菜單。

我沒有改變navigation.js文件中的任何東西（嘗試了很多不同的東西，沒有任何工作，只是破壞了東西）。

我改變了style.css的兩件事情，並添加轉場：

.main-navigation ul { 
    display: block; 
    list-style: none; 
    position: absolute; 
    left: -250px; 
    transition: left 1s ease-in-out; 
} 

/* Small menu. */ 
.menu-toggle, 
.main-navigation.toggled ul { 
    left: 0; 
    transition: left 1s ease-in-out; 
}

希望這有助於！

來源

2017-08-04 01:24:10 Nicole

感謝您的建議，不幸的是已經嘗試將轉換屬性應用於這兩個元素，但沒有運氣！問題是，當菜單第二次切換時，它會簡單地刪除類.toggled，以便將過渡應用到.main-navigation ul不會爲'出'動畫設置'移動'菜單的動畫。似乎需要Jquery才能在上面的代碼中添加.slideToggle或.fadeToggle，但卻無法使其工作！ – EasterMedia

JS/CSS - 動畫手機菜單切換

回答

相關問題