通过JavaScript赋值的CSS动画失效，求问题排查与解决

我在做移动端Web界面时，想实现一个简洁的滑入滑出菜单效果：点击按钮给固定定位的菜单加带动画的类，让它滑入屏幕。初次显示正常，但添加反向动画后，点击滑出时动画不播放，菜单直接消失；而且首次显示后再次点击显示，动画也触发不了。我希望每次切换类时，动画都能重置并完整播放，以下是我的代码，求帮忙分析原因。

<script>
function setup(e){
 document.getElementById("menuButton").addEventListener("click", menuShow, false);
}

function menuShow(){
 var menu = document.getElementById("menu");
 if(menu.classList.contains("hiding")||
 menu.classList.contains("hidden")){
  menu.classList.add("showing");
  menu.classList.remove("hiding");
  menu.classList.remove("hidden");
 }else{
  menu.classList.add('hiding');
  menu.classList.remove('showing');
 };
}
</script>

<style>
#menu{
position:fixed;
color:white;
background-color:#f99;
width:100px;
}

#menu.showing{
 animation: 0.15s ease-out 0s 1 forwards popoutRight;
}
        
#menu.hiding{
 animation: 0.15s ease-out 0s 1 backwards popoutRight;
}
        
@keyframes popoutRight {
 from {right: -100px;}
 to {right: 0px;}
}
</style>

<body>
 <div id="menuButton">
  <h2>Show Menu</h2>
 </div>
 <ul id="menu" class="hidden">
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</body>

问题原因 #

• 反向动画逻辑错误：你定义的popoutRight动画是从隐藏位置滑到显示位置，但hiding类复用这个动画，只会让菜单继续向右移动，根本不是滑出效果；而且backwards关键字在这里没用，它会提前应用动画起始状态，但你需要的是从当前显示状态滑回隐藏状态。
• 动画结束后无状态维持：showing动画结束后，菜单停在显示位置，但你直接移除了showing类，没有用固定类维持这个状态。下次点击时，菜单已经在显示位置，再加showing类时，元素状态没有变化，动画自然不会触发。
• 缺少hidden类样式：菜单初始加了hidden类，但CSS里没定义这个类的样式，初始位置不明确，也会影响动画触发逻辑。

修复后的代码 #

HTML #

<body onload="setup()">
  <div id="menuButton">
    <h2>Show Menu</h2>
  </div>
  <ul id="menu" class="hidden">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>

CSS #

#menu{
  position:fixed;
  color:white;
  background-color:#f99;
  width:100px;
  top:0;
  bottom:0;
  margin:0;
  padding:10px;
  list-style:none;
}

/* 明确隐藏状态的位置 */
#menu.hidden{
  right: -100px;
}

#menu.showing{
  animation: 0.15s ease-out 0s 1 forwards slideInRight;
}

#menu.hiding{
  animation: 0.15s ease-out 0s 1 forwards slideOutRight;
}

/* 滑入动画 */
@keyframes slideInRight {
  from {right: -100px;}
  to {right: 0px;}
}

/* 新增滑出动画，方向相反 */
@keyframes slideOutRight {
  from {right: 0px;}
  to {right: -100px;}
}

JavaScript #

function setup(){
  document.getElementById("menuButton").addEventListener("click", menuShow, false);
}

function menuShow(){
  const menu = document.getElementById("menu");
  
  // 动画过程中禁止重复点击，避免类混乱
  if(menu.classList.contains("showing") || menu.classList.contains("hiding")) return;
  
  if(menu.classList.contains("hidden")){
    menu.classList.remove("hidden");
    menu.classList.add("showing");
  }else{
    menu.classList.add("hiding");
  }
  
  // 监听动画结束，切换到对应状态类
  menu.addEventListener('animationend', function handleAnimationEnd(e){
    if(e.animationName === 'slideInRight'){
      menu.classList.remove("showing");
    }else if(e.animationName === 'slideOutRight'){
      menu.classList.remove("hiding");
      menu.classList.add("hidden");
    }
    // 移除监听，防止重复绑定
    menu.removeEventListener('animationend', handleAnimationEnd);
  });
}

修复要点说明 #

• 新增slideOutRight反向动画，实现菜单从显示位置滑回隐藏位置的效果。
• 给hidden类添加明确的位置样式，确保初始状态和滑出后的状态统一。
• 通过animationend事件监听动画完成，及时切换状态类：滑入完成后移除showing类（不需要维持，因为元素已经在显示位置），滑出完成后添加hidden类，确保下次点击时元素回到动画起始状态。
• 增加点击拦截逻辑，动画过程中禁止重复操作，避免类叠加导致的异常。

内容的提问来源于stack exchange，提问作者world_sword