使用 JavaScript 切换 CSS 类无法生成动画

Question

我有一个通过 Javascript 添加一些 CSS 类来触发的移动菜单动画（下面的实时代码 sn-p 中的简化版本）。

我遇到的问题是，虽然菜单动画正确，但当我关闭它时，它只是消失了，并没有像我预期的那样淡出。

我已经在 J​​S 中记录了不同阶段的作用，但我似乎无法让它像 CSS 动画类所说的那样淡出？

任何帮助都会非常棒。

代码笔：https://codepen.io/emilychews/pen/bQOXVm

谢谢，艾米丽。

var mobileMenuButton = document.querySelector(".button")
var mobileMenu = document.querySelector(".menu")

// TOGGLE MOBILE MENU
var clicked = false

function toggleMobileMenu() {
  
  if (clicked === false) {
// removes the `display-none` class added below in the `else` part of the statement, so menu can be toggled more than once
    mobileMenu.classList.remove("display-none") 
    
// changes `display:none` from stylesheet to `display:flex`
    mobileMenu.classList.add("display")                
    
// removes inactive animation that is added below   
    mobileMenu.classList.remove("mobileMenuInactive")
    
// adds the menuActive animation that animates the menu in   
    mobileMenu.classList.add("mobileMenuActive")
    
// changes word on menu button
    mobileMenuButton.textContent = "Close"
    
    clicked = true

  } else {
    
    mobileMenu.classList.remove("mobileMenuActive")
    mobileMenu.classList.add("mobileMenuInactive")
    mobileMenuButton.textContent = "Menu"
    mobileMenu.classList.add("display-none")
    
    clicked = false
  }
}

mobileMenuButton.addEventListener("click", function() {
  toggleMobileMenu()
}, false)

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: flex;
  align-items: center;
}

.menu {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  background: blue;
  right: 0;
  top: 6rem;
  padding: 10px 0px;
  z-index: 99;
  width: 20%;
  height: calc(100vh - 10rem);
  color: white
}

.button {
  margin: 0 0 0 3rem;
  cursor: pointer;
  padding: 10px 20px;
  background: gray;
  color: white;
}

/*add & remove `display` property*/
.menu.display {display: flex;}
.menu.display-none {display: none;}

/*animations*/
.menu.mobileMenuActive {
  animation: showMobileMenu .5s ease-in forwards;
 }

.menu.mobileMenuInactive {
  animation: removeMobileMenu .5s ease-out forwards;
 }

@keyframes showMobileMenu {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes removeMobileMenu {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

<div class="wrapper">
  <div class="menu">Menu</div>
  <div class="button">Click Me</div>
</div>

Answer 1

您需要等待 500 毫秒（动画的时间）才能将显示传递给 none：

setTimeout(function(){
  mobileMenu.classList.add("display-none");  
},500);