移动端菜单展开动画流畅但收起卡顿，如何修复？

问题原因 #

菜单收起动画卡顿的核心问题：切换is-open类时，.mobile-menu的overflow-y属性从visible瞬间变回hidden，此时.mobile-menu__wrapper的高度过渡还未完成，内容被突然截断，导致动画失去流畅性。

修复方案 #

调整CSS逻辑，移除对父元素overflow-y的切换，让菜单容器自身通过高度过渡控制内容显示/隐藏，同时优化过渡属性减少性能开销：

/* 优化后的CSS */
.mobile-menu {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  /* 移除默认的overflow-y: hidden，不再依赖父元素控制溢出 */
}

/* 替换全局transition为具体属性，避免不必要的重绘 */
.mobile-menu .mobile-menu__icon {
  height: 90%;
  transition: transform 0.2s ease-in;
}

.mobile-menu .mobile-menu__wrapper {
  position: absolute;
  width: 100%;
  bottom: 40px;
  height: 0;
  overflow-y: hidden; /* 容器自身控制溢出，高度为0时隐藏内容 */
  transition: height 0.2s ease-in; /* 仅对height属性做过渡 */
}

.mobile-menu .mobile-menu__trigger {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.mobile-menu .mobile-menu__items {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 移除is-open类中对overflow-y的设置 */
.mobile-menu.is-open .mobile-menu__icon {
  transform: rotate(180deg);
}

.mobile-menu.is-open .mobile-menu__wrapper {
  height: 40vh;
}

额外性能优化建议 #

1. 禁用transition: all：全局过渡所有属性会触发不必要的重绘/重排，明确指定需要过渡的属性（如height、transform）能大幅提升动画流畅度。
2. 改用transform动画：如果仍存在性能问题，可将高度过渡替换为transform: translateY()，该属性由GPU加速，动画表现更稳定：

   .mobile-menu .mobile-menu__wrapper {
     position: absolute;
     width: 100%;
     bottom: 40px;
     height: 40vh;
     transform: translateY(100%);
     transition: transform 0.2s ease-in;
   }
   
   .mobile-menu.is-open .mobile-menu__wrapper {
     transform: translateY(0);
   }
   

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