選單下拉影片中的意外行為-有解無憂

我有一個帶有淡入淡出底部影片的下拉選單。一切正常，但有一個問題。

預期行為：當我單擊按鈕打開選單時，下拉內容顯示為淡入淡出影片。有用！

問題：影片有一定的速度，點擊打開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">[email protected]</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>

uj5u.com熱心網友回復：

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">[email protected]</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>

uj5u.com熱心網友回復：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/473950.html

標籤：javascript html css 动画片下拉式菜单

上一篇：CSS影片關鍵幀在Iphone/Ipad上不起作用

下一篇：如何將淡出影片添加到可點擊的下拉選單中