菜单下拉动画中的意外行为

Question

我有一个带有淡入淡出底部动画的下拉菜单。 一切正常，但有一个问题。

预期行为：当我单击按钮打开菜单时，下拉内容显示为淡入淡出动画。 有用！

问题：动画有一定的速度，点击打开0.4s，点击关闭菜单0.4s。 我希望这是速度，但是当我单击关闭时我被迫停留在 0.6 秒，因为低于该时间动画被破坏导致下拉列表行为奇怪。 也就是说，观想它片刻，然后它就消失了。

回顾一下： animation:animateToBottom 0.6s但不适用于animation:animateToBottom 0.4s

所有这些我都应用于类.w3-dropdown-content.w3-hide 。 您可以通过运行下面的代码来亲眼看看，行为并非应有的样子。 但是，如果您尝试将 0.4s 更改为 0.6s 或更多，那么它工作正常。

对不起，我是新人，我做错了吗？ 我很感激任何回应，谢谢。

 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) } }

 /*Items menu*/ .user_menu { display: flex; flex-direction: column; } /*Menu header info*/ .display.name { font-size: 15px; font-weight: 500; color: #303238; } .display.mail { font-size: 13px; color: #3d5afe; } hr.solid { border-top: 1px solid #e0e0e0; margin: 10px 0px 10px 0px; } /*Text Link css*/ .user_menu.item > a { display: flex; justify-content: flex-start; align-items: center; padding: 8px 0; font-size: 13px; color: #75777D; } .user_menu.item:hover > a { color: #2E323A; } /*Icon Menu*/ .icn_menu:before, .icon_menu:after { margin: 0px; padding: 0px; font-size: 16px } .icn_menu { margin-right: 10px; display: flex !important; align-items: center; justify-content: center; width: 22px; height: 22px; } /* User Menu For header website */ .w3-container { display: flex; flex-direction: column; align-content: flex-end; align-items: flex-end; } .w3-dropdown-click { position: absolute; margin-top: 17px; } .w3-dropdown-content { display: none; padding: 20px; background-color: #fff; min-width: 160px; width: 280px; border-radius: 3px; overflow-x: hidden; overflow-y: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; position:relative; animation:animateFromBottom 0.4s } @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-show-block,.w3-show { display:block!important; } .w3-dropdown-content.w3-hide { animation:animateToBottom 0.4s } .user_menu_button { width: 100%; background: #fbfbfb!important; font-weight: 500!important; }

 <button onclick="myFunction()" class="user_menu_button">Account</button> <div class="w3-container"> <div class="w3-dropdown-click"> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border"> <div class="user_menu header"> <span class="display name">Hello user</span> <span class="display mail">usermail@gmail.com</span> </div> <hr class="solid"> <div class="user_menu item"> <a href="/account"> <i class="icn_menu fa-regular fa-user">1</i> <span class="link_text">Dashboard</span> </a> </div> <div class="user_menu item"> <a href="ordini"> <i class="icn_menu fa-regular fa-basket-shopping">2</i> <span class="link_text">My orders</span> </a> </div> <div class="user_menu item"> <a href="libreria"> <i class="icn_menu fa-regular fa-cloud-arrow-down">3</i> <span class="link_text">Downloads</span> </a> </div> <div class="user_menu item"> <a href="impostazioni"> <i class="icn_menu fa-regular fa-gear">4</i> <span class="link_text">Settings</span> </a> </div> <div class="user_menu item"> <a href="wp-login.php?action=logout"> <i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i> <span class="link_text">Logout</span> </a> </div> </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", ""); }, 400) // this duration must be like css duration } }

Answer 2

 var x = document.getElementById("Demo"); function myFunction() { x.classList.toggle('w3-show') }

 /*Items menu*/ .user_menu { display: flex; flex-direction: column; } /*Menu header info*/ .display.name { font-size: 15px; font-weight: 500; color: #303238; } .display.mail { font-size: 13px; color: #3d5afe; } hr.solid { border-top: 1px solid #e0e0e0; margin: 10px 0px 10px 0px; } /*Text Link css*/ .user_menu.item > a { display: flex; justify-content: flex-start; align-items: center; padding: 8px 0; font-size: 13px; color: #75777D; } .user_menu.item:hover > a { color: #2E323A; } /*Icon Menu*/ .icn_menu:before, .icon_menu:after { margin: 0px; padding: 0px; font-size: 16px } .icn_menu { margin-right: 10px; display: flex !important; align-items: center; justify-content: center; width: 22px; height: 22px; } /* User Menu For header website */ .w3-container { display: flex; flex-direction: column; align-content: flex-end; align-items: flex-end; } .w3-dropdown-click { position: absolute; margin-top: 17px; } .w3-dropdown-content { visibility: hidden; z-index: -10; padding: 20px; background-color: #fff; min-width: 160px; width: 280px; border-radius: 3px; overflow-x: hidden; overflow-y: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); position:relative; top: 30px; transition: top .4s, z-index .4s, visibility .4s, opacity .4s; opacity: 0; } .w3-show { visibility: visible; opacity: 1; z-index: 1; top: 0; } .user_menu_button { width: 100%; background: #fbfbfb!important; font-weight: 500!important; }

 <button onclick="myFunction()" class="user_menu_button">Account</button> <div class="w3-container"> <div class="w3-dropdown-click"> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border"> <div class="user_menu header"> <span class="display name">Hello user</span> <span class="display mail">usermail@gmail.com</span> </div> <hr class="solid"> <div class="user_menu item"> <a href="/account"> <i class="icn_menu fa-regular fa-user">1</i> <span class="link_text">Dashboard</span> </a> </div> <div class="user_menu item"> <a href="ordini"> <i class="icn_menu fa-regular fa-basket-shopping">2</i> <span class="link_text">My orders</span> </a> </div> <div class="user_menu item"> <a href="libreria"> <i class="icn_menu fa-regular fa-cloud-arrow-down">3</i> <span class="link_text">Downloads</span> </a> </div> <div class="user_menu item"> <a href="impostazioni"> <i class="icn_menu fa-regular fa-gear">4</i> <span class="link_text">Settings</span> </a> </div> <div class="user_menu item"> <a href="wp-login.php?action=logout"> <i class="icn_menu fa-regular fa-arrow-right-from-bracket">5</i> <span class="link_text">Logout</span> </a> </div> </div> </div> </div>