Question

这是相关的HTML

    <div id="mySidebar" class="sidebar">
        <a class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#">Home</a>

        <div class="dropdown">
            <button id="isClosed" class="dropbtn" onclick="openDropdown()">Manual</button>
            <button id="isOpen" class="dropbtn" onclick="closeDropdown()" style="display:none">Manual
            </button>
             <div class="dropdown-content">
                <a class="dropdown-item" href="#">Intro</a>
                <a class="dropdown-item" href="#">Body</a>
                <a class="dropdown-item" href="#">Conclusion</a>
            </div>
        </div>
        <a href="#">Contact</a> 
    </div>

和CSS

    /* The sidebar menu */
    .sidebar {
        position: fixed;
        z-index: 1; 
        padding-top: 60px; 
        top: 0;
        left: 0;
        height: 100%; 
        width: 0; 
        background-color: #111; 
        overflow-x: hidden; 
        transition: 0.5s; 
    }
    /* The sidebar links */
    .sidebar a {
        display: block;
        margin-bottom: .5em;
        text-align: center;
        text-decoration: none;
        font-size: 3em;
        color: #818181;
        transition: 0.5s;
    }
    /* Container for Links within dropdown */
    .dropdown-content {
        display: block;
        text-decoration: none;
        text-align: center;
        font-size: .75em;
        color: #818181;
        overflow-x: hidden; 
        height: 0;
        transition: .5s;
    }
    /* Links within dropdown */
    .dropdown-content .dropdown-item {
        margin: 0;
        padding: 0;
        height: 0;
        transition: .5s;
}

当我打开下拉菜单时，所有内容都会平滑地动画/过渡，但是当我再次单击它以关闭时，下拉项将关闭而没有任何动画。在Chrome的开发工具中进行了检查，过渡属性在0.5秒时仍保持不变。我想念什么？

Answer 1

您需要编写隐藏或可见属性，而不是不显示任何内容或显示块。

为什么此动画在打开时会平稳工作，而在关闭时会死机？

1 个答案: