JavaScript導航按鈕代碼問題

Question

我試圖使此按鈕起作用，以便它不只是“立即”顯示菜單。 當我在代碼中添加.style.WebkitTransition內容時，它破壞了功能。 如果沒有該按鈕，該按鈕將起作用，但是它將立即顯示內容。 我希望它像在不錯的網站上一樣平穩過渡。 我不需要演示演示或任何東西，我只需要一個JavaScript專家來告訴我如何從此代碼中獲得所需的結果。 謝謝！

的JavaScript

function mobileFunction() {
    var x = document.getElementById("JavaMenu").style.WebkitTransition = "ease 1s";
    if (x.className === "navbar") {
        x.className += " responsive";
    } else {
        x.className = "navbar";
    }
}

Answer 1

在CSS中使用max-height代替height

 function mobileFunction() { var x = document.getElementById("JavaMenu"); x.style.transition = "ease 1s"; document.getElementById('JavaMenu').classList.toggle('responsive'); } 

 .navbar{ max-height:0; overflow:hidden; transition: ease 1s} .navbar.responsive{ max-height: 200px;} 

 <span onclick="mobileFunction()">Toggle Menu</span> <ul id="JavaMenu" class="navbar"> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> </ul> 

Answer 2

您可能無法為display屬性設置動畫。

使用時應加top, left | margins | transform | opacity top, left | margins | transform | opacity top, left | margins | transform | opacity以實現有效的動畫效果， display: block僅顯示元素。 設置菜單動畫的最有效方法是通過display: none隱藏菜單：將其隱藏並從視圖中移開X = -MENU_WIDTH LEFT或X = SCREEN_WIDTH + MENU_WIDTH RIGHT，然后進行滑動效果

// CSS
#JavaMenu {
   // hide it by default
   display: none;
   // width: 320px;
   // throw it off screen, give it -width or more than -width to effectively hide it
   transform: translateX(-320px);
   // you can just simply put the transition here:
   // transition: 1s ease;
}

// the show
#JavaMenu.responsive {
    // show it
    display: block;
    // move it on screen;
    transform: translateX(0);
}

// JS
// then toggle the classes as you did in your JS
// this will give it animation effect

同樣， .className()使用.className()您實際上還可以使用.classList.contains('navbar')來檢查navbar類是否存在， classList.add(class)要添加classList.remove(class)要刪除classList.remove(class) 。

希望能有所幫助。