Css转换不适用于导航栏的ul元素

Question

我正试图使用javascript在导航栏上的toggle上向上和向下动画滑块，但css transition属性在ul元素上不起作用

以下是我更新的代码笔https://codepen.io/divya95/pen/vYNdKrz代码：

<div class="container row">
<nav class="nav">
<a class="logo"><img src="../flexbox/vanderbilt-commodores-1.svg"></a>
<ul class="nav__list nav__list--primary">
<li class="nav__item">
<a href="#" class="nav__link">Home</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Contact Us</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Sign In</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link nav__link--button">Sign Up</a>
</li>
</ul>
<button class="nav-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button> 
<!--   <ul class="nav__list nav__list--secondary">
</ul> -->
</nav>
</div>

Css:

.nav-visible {
width: 100%;
text-align: center;
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
top: 40px;
display: block;
background: #2E323F;
list-style-type: none;
padding: 1em;
/* this is not working */
transition: height 5s ease; 
}

Answer 1

这里我使用jQuery是因为它对我来说更容易，但你可以不用它。

注意我是如何更改.nav-visible和.nav__list的

$(document).ready(function(){
$('.nav-toggle').click(function () {
$(this).toggleClass('is-active');
toggleMenu($(this).hasClass('is-active'));
});
});

function toggleMenu(openMenu) {
let menu = $('.nav__list');
if(openMenu) {
menu.css('height', 'auto');
let nextHeight = menu.height();
menu.css('height', 0);
menu.animate({
'height': nextHeight,
'padding': '1em'
}, 200, function() {
menu.css({
'height': 'auto',
});
});
} else {
menu.css('overflow', 'hidden');
menu.animate({
'height': 0,
'padding': 0
}, 200);
}
}

* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 1.3125rem;
line-height: 1.6;
color: #222C2A;
}
.container {
max-width: 1200px;
}
.row {
display: flex;
justify-content: space-between;
}
.nav {
display: flex;
justify-content: space-between;
width: 100%;
background: #2E323F;
}
.nav__list {
height: 0;
overflow: hidden;
}
.nav__link {
text-decoration: none;
text-transform: uppercase;
font-size: 1rem;
font-weight: 600;
color: white;
}
.nav__list {
width: 100%;
text-align: center;
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
top: 40px;
display: block;
background: #2E323F;
list-style-type: none;
padding: 0em;
}
.nav-visible {
padding: 1em;
}
.nav-visible .nav__item {
padding-bottom: 1em;
}
.nav__link {
padding: 1em;
}
.logo {
margin-left: 2.5em;
}
.logo img {
width: 45px;
height: 45px;
margin-left: 1em;
margin-top: 0.5em;
margin-right: 0.5em;
}
.nav-toggle {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
margin-top: 0.85em;
margin-right: 0.95em;
}
.bar {
cursor: pointer;
display: block;
height: 2px;
background: #222C2A;
transition: all 0.3s ease-in-out;
}
.bar:nth-child(1) {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.bar:nth-child(3) {
-webkit-transform: translateY(6px);
transform: translateY(6px);
}
.hamburger-active .bar:nth-child(1) {
-webkit-transform: translateY(2px) rotate(45deg);
transform: translateY(2px) rotate(45deg);
}
.hamburger-active .bar:nth-child(2) {
opacity: 0;
}
.hamburger-active .bar:nth-child(3) {
-webkit-transform: translateY(-2px) rotate(-45deg);
transform: translateY(-2px) rotate(-45deg);
}
@media(min-width: 700px) {
header {
background: #2E323F;
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav {
display: flex;
justify-content: space-between;
}
.nav__list {
list-style-type: none;
display: flex;
/* visibility: visible; */
}
.nav__link {
text-decoration: none;
text-transform: uppercase;
font-size: 0.85rem;
margin-right: 0.8em;
}
.nav-toggle {
display: none;
}
.nav__item {
margin-right: 1.5em;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container row">
<nav class="nav">
<a class="logo"><img src="../flexbox/vanderbilt-commodores-1.svg"></a>
<ul class="nav__list nav__list--primary">
<li class="nav__item">
<a href="#" class="nav__link">Home</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Contact Us</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Sign In</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link nav__link--button">Sign Up</a>
</li>
</ul>
<button class="nav-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
</nav>
</div>
</header>