有没有什么方法可以设置CSS动画以不同的方式工作，例如按钮打开/关闭

Question

我现在想要为移动导航设置动画。用户点击一个汉堡，导航会向下滑动，点击任何链接，或者汉堡本身的导航会向上滑动。

直到今天，我通过制作2个div来解决这个问题，其中第一个一个具有向下滑动的动画的display: block;，另一个具有向上滑动的动画display: none;。点击汉堡后，这两个选项会切换，这样就可以了。

它工作得很好，但是，我认为它可以用更少的代码来完成。

Answer 1

类似的东西？

这将使用csstransition属性来设置滑动的动画。

document.getElementById("toggle").addEventListener("click", e => {
document.getElementById("menu").classList.toggle("menu-hidden");
});

body {
margin: 0;
}
.menu {
height: 300px;
width: 100%;
background-color: lightgreen;
transition: all 0.5s;
overflow: hidden;
}
.menu-hidden {
height: 0;
}

<button id="toggle">Toggle menu</button>
<div class="menu" id="menu">Menu content</div>

Answer 2

请尝试一下。使click ()事件分配ON&OFF按钮的值。

function onoff(){
currentvalue = $('#onoff').val();
if(currentvalue == "Off"){
$('#onoff').val("On");
}else{
$('#onoff').val("Off")
}
}
</script>
<input type="button" value="On" id="onoff" onclick="onoff();"> ```

Answer 3

这里是另一个方法。这只需使用变换-平移、转换和z索引将菜单定位在屏幕之外，单击汉堡包时，它会切换菜单以向下滑动到其原始位置。我还添加了一些功能，这样菜单项在单击时也会切换菜单幻灯片。

document.getElementById("hamburger").addEventListener("click", e => {
document.getElementById("menu").classList.toggle("slide");
});
Array.from(document.getElementsByClassName("menu-item")).forEach((item) => {
item.addEventListener("click", function() {
document.getElementById("menu").classList.toggle("slide");
});
}
);

body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
position: relative;
background: #fff;
z-index: 2;
}
#menu {
background: lightblue;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
transform: translateY(-100%);
transition: 0.3s ease-in-out;
}
#menu li {
list-style: none;
padding: 0.5rem 1rem;
cursor: pointer;
}
.slide {
transform: translateY(0) !important;
transition: 0.3s ease-in-out;
}

<nav>
<button id="hamburger">Toggle</button>
</nav>
<ul id="menu">
<li class="menu-item">Link 1</li>
<li class="menu-item">Link 2</li>
<li class="menu-item">Link 3</li>
</ul>