如何将淡出动画添加到可点击的下拉菜单中

Question

我有一个在点击时打开的下拉菜单。 我在菜单打开时添加了一个底部淡入淡出动画。 现在我正在尝试在它关闭时添加淡出动画。 由于我是新手，我不知道该怎么做，有人可以帮助我吗？

我很感激任何回应，谢谢。

 function myFunction() { var x = document.getElementById("Demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } }

 .w3-dropdown-content { display: none; background-color: red; min-width: 160px; overflow: hidden; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; position:relative; animation:animatebottom 0.6s } @keyframes animatebottom { from{bottom:-50px;opacity:0} to{bottom:0;opacity:1} } .w3-bar-block .w3-bar-item { width:100%; display:block; padding:8px 16px; text-align:left; border:none; white-space:normal; float:none; outline:0 } .w3-show-block,.w3-show { display:block!important }

 <div class="w3-container"> <div class="w3-dropdown-click"> <button onclick="myFunction()" class="w3-button w3-black">Click Me!</button> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div>

Answer 1

请检查我添加到您的代码:)

 function myFunction() { var x = document.getElementById("Demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className += " w3-hide"; setTimeout(function(){ x.className = x.className.replace(" w3-show", ""); x.className = x.className.replace(" w3-hide", ""); },500) } }

 .w3-dropdown-content { display: none; background-color: red; min-width: 160px; overflow: hidden; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; position:relative; animation:animateFromBottom 0.6s } @keyframes animateFromBottom { from{bottom:-50px;opacity:0} to{bottom:0;opacity:1} } @keyframes animateToBottom { from{bottom:0;opacity:1} to{bottom:-50px;opacity:0} } .w3-bar-block .w3-bar-item { width:100%; display:block; padding:8px 16px; text-align:left; border:none; white-space:normal; float:none; outline:0 } .w3-show-block,.w3-show { display:block!important } .w3-dropdown-content.w3-hide { animation:animateToBottom 0.6s }

 <div class="w3-container"> <div class="w3-dropdown-click"> <button onclick="myFunction()" class="w3-button w3-black">Click Me!</button> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div>

可能会有所帮助:)