Overlay隐藏时RETURN按钮延迟消失问题求助

我来帮你搞定这个延迟问题！咱们先分析下原因，再给出针对性的解决方案。

问题根源 #

你当前用visibility: hidden来控制Overlay的隐藏，这个属性的特点是元素不可见但仍占据页面空间。加上按钮本身有transition: 0.5s的样式，当点击返回按钮触发隐藏时，浏览器可能还在处理按钮的过渡动画（比如hover状态的背景色变化），导致按钮看起来延迟一秒才消失。另外，visibility的渲染机制也可能让页面更新不及时，加剧了这个延迟感。

解决方案 #

推荐改用opacity配合pointer-events来控制Overlay的显示隐藏，同时给Overlay添加过渡效果，这样既保留平滑的动画，又能避免按钮延迟消失的问题：

1. 修改CSS样式

section.OVERLAY{
  background-color: rgba(30, 127, 136, 0.9);
  height: 99vh;
  width: 99vw;
  position: fixed;
  top: 0;
  z-index: 500;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  font-family: "PT sans";
  letter-spacing: 5px;
  /* 添加过渡效果，让显示隐藏更平滑 */
  transition: opacity 0.3s ease;
  opacity: 1;
  pointer-events: auto;

  @media only screen and (max-width: 720px) {
    font-size: 14px;
    line-height: 30px;
  }
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) {
    font-size: 14px;
    line-height: 30px;
  }
  @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
    font-size: 14px;
    line-height: 30px;
  }

  button{
    margin-top: 50px;
    height: 100px;
    width: 300px;
    background-color: rgba(255, 89, 88, 0.75);
    color: #FFFFFF;
    font-size: 40px;
    border: none;
    /* 按钮的过渡只针对背景色，避免影响可见性 */
    transition: background-color 0.5s ease;

    @media only screen and (max-width: 720px) {
      font-size: 14px;
      height: 40px;
      width: 130px;
    }
    @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) {
      font-size: 14px;
      height: 40px;
      width: 130px;
    }
    @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
      font-size: 14px;
      height: 40px;
      width: 130px;
    }
  }

  button:hover{
    background-color: rgba(255, 89, 88, 1);
  }
}

/* 替换原来的.hidden类 */
.hidden{
  opacity: 0;
  pointer-events: none; /* 隐藏后禁止点击，避免误操作 */
}

#button {
  width: 200px;
  height: 200px;
  background: red;
}

2. JS代码保持不变

你的JS逻辑不需要修改，还是通过添加/移除hidden类来控制：

function showOverlayFunction(){
  console.log('hello');
  $('.OVERLAY').removeClass('hidden')
}
function hideOverlayFunction(){
  $('.OVERLAY').addClass('hidden');
}

为什么这样有效？ #

• opacity: 0让Overlay完全透明，配合transition实现平滑的淡入淡出效果；
• pointer-events: none确保Overlay隐藏后不会拦截鼠标事件，避免影响页面其他元素；
• 给按钮的过渡明确指定为background-color，避免过渡属性影响元素的可见性变化，从根源上解决按钮延迟消失的问题。

如果完全不需要过渡动画，也可以直接改用display: none和display: flex来切换，但这样显示隐藏会比较生硬：

• 修改.hidden类为display: none;
• 移除Overlay的transition属性

这样点击返回按钮后，Overlay会立即消失，按钮也不会有延迟。

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