如何在Javascript中切換「顯示」時添加下推/俯臥撐效果？

Question

我已經做了一個下拉菜單使用Javascript和CSS的組合很好，但我希望顯示和隱藏菜單時的過渡效果，最好是下拉菜單時顯示，當它被隱藏時，它是一個俯臥撐......我如何整合這個？謝謝。

/* When the user clicks on the button, 
 
toggle between hiding and showing the dropdown content */ 
 

 
function myFunction() { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
// Close the dropdown if the user clicks outside of it 
 
window.onclick = function(event) { 
 
    if (!event.target.matches('.dropbtn')) { 
 

 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
     var openDropdown = dropdowns[i]; 
 
     if (openDropdown.classList.contains('show')) { 
 
     openDropdown.classList.remove('show'); 
 
     } 
 
    } 
 
    } 
 
}

.dropbtn { 
 
    width: 80px; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
    opacity: 0.95; 
 
    visibility: hidden; 
 
    display: block; 
 
    left: 0; 
 
    right: 0; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.dropbtn:hover, 
 
.dropbtn:focus { 
 
    opacity: 1; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 100%; 
 
    margin-top: 5px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: center; 
 
    font-family: Century Gothic, Calibri, Cambria, sans-serif; 
 
} 
 
.dropdown a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.show { 
 
    display: block; 
 
}

<div class="dropdown"> 
 
    <img onclick="myFunction()" src="../images/logotestme.png" class="dropbtn" </img> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="http://www.coopertimewell.com">Home</a> 
 
    <a href="http://www.coopertimewell.com/portfolio">Portfolio</a> 
 
    <a href="http://www.coopertimewell.com/contact">Contact</a> 
 
    <a href="http://www.coopertimewell.com/downloads">Downloads</a> 
 
    </div> 
 
</div>

Answer 1

，而不是通過添加刪除秀類切換顯示屬性，

可以，取決於你想要達到什麼樣的，動畫的高度，或頂部，或者使用css轉換的目標元素的轉換屬性

這裏是一個鏈接，示例有人作了演示：

012從該鏈接

http://codepen.io/shshaw/pen/gsFch

代碼示例：

.sub-menu-parent { 
    position: relative; 
} 
.sub-menu { 
    visibility: hidden; 
    /* hides sub-menu */ 
    opacity: 0; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    transform: translateY(-2em); 
    z-index: -1; 
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; 
} 
.sub-menu-parent:hover .sub-menu { 
    visibility: visible; 
    /* shows sub-menu */ 
    opacity: 1; 
    z-index: 1; 
    transform: translateY(0%); 
    transition-delay: 0s, 0s, 0.3s; 
    /* this removes the transition delay so the menu will be visible while the other styles transition */ 
} 
/* presentational */ 
body { 
    padding: 2%; 
    font: 18px/1.4 sans-serif; 
} 
nav a { 
    color: #E00; 
    display: block; 
    padding: 0.5em 1em; 
    text-decoration: none; 
} 
nav a:hover { 
    color: #F55; 
} 
nav ul, 
nav ul li { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
nav > ul { 
    background: #EEE; 
    text-align: center; 
} 
nav > ul > li { 
    display: inline-block; 
    border-left: solid 1px #aaa; 
} 
nav > ul > li:first-child { 
    border-left: none; 
} 
.sub-menu { 
    background: #DDD; 
}