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

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>

有帮助:)

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

How to add fade out animation to the clickable dropdown menu

html

javascript

css

animation

drop-down-menu