如果没有jQuery或Bootstrap，我如何设置切换导航栏的动画

Question

我得到了一个功能切换导航栏，但我完全不知道如何像Bootstrap那样设置动画。我已经设置好了，JS可以在导航栏中添加和删除"显示菜单"类，但我真的不确定如何让菜单项滑入。我真的不能确定这是基于CSS的解决方案还是基于JS的解决方案，或者两者兼而有之。关于如何处理这个问题，有什么想法或建议吗？这就是我已经在做的(请原谅Django标签(：

HTML:

<navbar>
<ul id="navbar" class="nav-list">
<li class="nav-item">
<a href="#">
<img src="{% static 'dblfree/img/logo-circle.png' %}" alt="Logo">
</a>
</li>
<li class="nav-item toggle">
<button class="btn-primary" onclick="toggleNavbar()">&#x2630;</button>
</li>
<li class="nav-item">
<a href="#">Blog</a>
</li>
<li class="nav-item">
<a href="#">About</a>
</li>
<li class="nav-item">
<a href="#">Portfolio</a>
</li>
<li class="nav-item">
<button class="btn-primary">Contact</button>
</li>
</ul>
</navbar>

CSS：

:root {
--clr-primary: #047c84;
--clr-shadow: #cfd8dc;
--radius: 0.5rem;
}
body {
background-color: #f0f7f8; /* TEMP */
font-family: 'Montserrat', sans-serif;
padding: 1rem;
}
.nav-list {
background: white;
box-shadow: 0px 0px 10px var(--clr-shadow);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav-item {
list-style: none;
margin-right: 2rem;
}
.nav-item a {
text-decoration: none;
color: black;
transition: all 200ms ease-in;
}
.nav-item a:hover {
color: var(--clr-primary);
}
.nav-item:first-child {
margin-right: auto;
margin-left: 2rem;
}
.nav-item img {
width: 50px;
}
.btn-primary {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
background: none;
border: 2px solid var(--clr-primary);
outline: none;
border-radius: var(--radius);
padding: 0.5rem 1rem;
transition: all 200ms ease-in;
}
.btn-primary:hover {
color: white;
background: var(--clr-primary);
}
.toggle {
display: none;
}
@media screen and (max-width: 600px) {
body {
padding: 0;
}
.toggle {
display: block;
}
.nav-list {
border-radius: 0;
flex-wrap: wrap;
}
.nav-list li:nth-child(n+3) {
width: 100%;
text-align: right;
margin-top: 2rem;
display: none;
}
.nav-list.display-menu .nav-item {
display: block;
transition: all 800ms;
}
}

JavaScript:

function toggleNavbar() {
let navbar = document.getElementById("navbar");
if (navbar.className === "nav-list") {
navbar.className += " display-menu";
}
else {
navbar.className = "nav-list";
}
}

Answer 1

为关闭和打开按钮添加一个链接标记。并添加onclick="；opennav(("；到打开链接并且onclick="；closenav(("；到闭合链接。

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}