Question

我正在努力使这个按钮工作，所以它不仅仅是＆＃34;瞬间＆＃34;显示菜单。当我将.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以获得有效的动画效果，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()来检查.classList.contains('navbar')类是否存在，navbar添加classList.add(class)并删除classList.remove(class)，而不是使用{{1}}。

希望有所帮助。

JavaScript导航按钮代码问题

2 个答案: