Css 过渡不适用于导航栏的 ul 元素

Question

我正在尝试使用 javascript 在导航栏上切换时向上和向下设置动画，但 css 转换属性不适用于 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>