仅用CSS实现Opacity淡入淡出时FadeOut失效问题求解

核心问题原因 #

• 触发显示时同时切换active和d-none类，d-none的display: none属性会直接中断动画渲染流程
• 默认给.superposer绑定了带2秒延迟的淡出动画，和淡入动画优先级冲突，导致淡入逻辑不生效
• 未给动画设置forwards填充模式，动画执行结束后会回退到初始属性值
• 抽屉的显示逻辑未和遮罩同步，多次点击toggle会出现状态不一致的问题

调整后代码 #

CSS 调整 #

.superposer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.52);
  opacity: 0;
  /* 仅在非active状态触发淡出动画 */
  &:not(.active) {
    animation: superposerFadeOut 1s ease-in-out forwards;
  }

  &.active {
    opacity: 1;
    /* 0.2s为淡入延迟，可自行调整，forwards保证动画结束保持最终状态 */
    animation: superposerFadeIn 0.5s ease-in-out 0.2s forwards;
  }
}

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

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

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  transition: right 0.25s ease-in-out;
  right: -350px;
  background-color: white;
  border-left: 1px solid #999;
  width: 350px;

  &.active {
    transition: right 0.25s ease-in-out 0.25s;
    right: 0;
  }
}

jQuery 调整 #

$(() => {
  $('#toggle').on('click', () => {
    const $superposer = $('.superposer');
    const $drawer = $('.drawer');
    // 区分显示/隐藏逻辑
    if ($superposer.hasClass('d-none')) {
      // 显示逻辑：先移除d-none，等待浏览器渲染完成后再加active触发淡入
      $superposer.removeClass('d-none');
      requestAnimationFrame(() => {
        $superposer.addClass('active');
        $drawer.addClass('active');
      })
    } else {
      // 隐藏逻辑：先移除active触发淡出，动画结束后加d-none
      $superposer.removeClass('active');
      $drawer.removeClass('active');
      setTimeout(() => {
        $superposer.addClass('d-none')
      }, 1000)
    }
  });

  $('.superposer').on('click', () => {
    $('.superposer').removeClass('active');
    $('.drawer').removeClass('active');

    setTimeout(() => {
      $('.superposer').addClass('d-none')
    }, 1000)
  })
})

HTML 代码（无调整，可直接复用） #

<div class="container border rounded mt-5">
  <div class="row">
    <div class="col pb-3">
      <h1>Opacity Fade In/Out</h1>
      <button class="btn btn-primary" id="toggle">Toggle</button>
    </div>
  </div>
</div>

<div class="superposer d-none"></div>
<div class="drawer">
  <div class="row mx-0 mt-4">
    <div class="col">
      <h3>Drawer</h3>
    </div>
  </div>
</div>

实现说明 #

• 利用requestAnimationFrame保证浏览器先把遮罩渲染为可见但透明的状态，再触发淡入动画，避免属性切换导致的动画失效
• 动画增加forwards属性，保证动画执行结束后保持最后一帧的状态，不会出现视觉跳变
• 淡入延迟直接在CSS动画属性中配置，可根据需求调整第三个参数的数值（单位为秒）
• 所有动画逻辑均由CSS实现，JS仅负责类切换和延迟处理，符合预期开发要求

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