如何通过jQuery toggleClass实现全屏菜单开关双向一致的动画效果

当前关闭动画缺失的核心原因是菜单动画使用了单向@keyframes规则，仅在添加.opens类时触发动画，移除类时元素会直接回到默认状态，无过渡效果。以下是两种可行实现方案：

方案1：使用transition替代animation（推荐，维护成本最低） #

transition本身支持属性变化的双向过渡，不需要额外写JS逻辑，和你现有动画效果完全一致。

修改CSS： #

/* 给菜单元素添加默认隐藏状态和过渡规则 */
h1 span {
  /* 保留原有其他样式 */
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: all 1.5s ease; /* 时长和你原有动画保持一致 */
}
/* 关联overlay的open状态，打开时展示菜单 */
.overlay.open h1 span {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
/* 可以删除原来的.opens类和对应的reveal动画，不需要了 */

修改JS： #

删除toggle .opens类的逻辑即可：

$('#toggle').click(function() {
   $(this).toggleClass('active');
   $('.overlay').toggleClass('open');
   // 移除$('h1 span').toggleClass('opens'); 这一行
});

该方案下打开、关闭菜单都会自动触发对应方向的过渡动画，效果和你原有打开动画完全对称。

方案2：保留@keyframes自定义开闭动画 #

如果你需要给打开、关闭设置不同的动画效果，可以新增关闭动画，配合JS状态判断实现：

新增CSS： #

/* 原有样式保留，新增关闭动画 */
@keyframes hide {
  0% {
    transform: translate(0,0);
  }
  100% {
    transform: translate(0,100%);
  }
}
.closes {
  display: block;
  animation: hide 1.5s;
}

修改JS： #

增加状态判断和动画结束回调，保证动画播放完成后再修改元素显隐状态：

let isMenuOpen = false;
let animating = false; // 动画锁，防止重复点击触发异常
$('#toggle').click(function() {
  if(animating) return;
  animating = true;
  $(this).toggleClass('active');
  
  if(!isMenuOpen) {
    // 打开菜单逻辑
    $('.overlay').addClass('open');
    $('h1 span').removeClass('closes').addClass('opens').one('animationend', function() {
      isMenuOpen = true;
      animating = false;
    });
  } else {
    // 关闭菜单逻辑，先播关闭动画再隐藏遮罩
    $('h1 span').removeClass('opens').addClass('closes').one('animationend', function() {
      $('.overlay').removeClass('open');
      $('h1 span').removeClass('closes');
      isMenuOpen = false;
      animating = false;
    });
  }
});

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