如何將淡出影片添加到可點擊的下拉選單中-有解無憂

我有一個在點擊時打開的下拉選單。我在選單打開時添加了一個底部淡入淡出影片。現在我正在嘗試在它關閉時添加淡出影片。由于我是新手，我不知道該怎么做，有人可以幫助我嗎？

我很感激任何回應，謝謝。

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>

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", "");
      
    },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>

可能會有所幫助:)

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

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

上一篇：選單下拉影片中的意外行為

下一篇：Moti避免for回圈加速和減速