Почему при открытии эта анимация работает плавно, а при закрытии она щелкает? - PullRequest
Новая
       9

Почему при открытии эта анимация работает плавно, а при закрытии она щелкает?

0 голосов
/ 15 января 2019

Вот соответствующий 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 секундах. Что мне не хватает?

1 Ответ

0 голосов
/ 15 января 2019

вам нужно написать скрытое или видимое свойство вместо отображения ни одного или блока.

...