弹窗侧滑过渡完成前遮罩已关闭的问题排查

问题背景 #

已实现弹窗从右向左滑入效果，但关闭时无法按预期从左向右滑出，尝试调整opacity、过渡效果及延迟均未解决。

原代码 #

<div class="overlay">
    <div class="items-content">
         <h1> hello </h1>
    </div>
</div>

.overlay {
    opacity: 0;
    transition: opacity 0.4s linear;
}

.overlay {
   &.-show {
      opacity: 1
   }
}

.overlay {
    .items-content {
         transform: translateX(200%);
         transition: transform 0.4s ease-in-out;
     }
}

.overlay {
    &.-show {
       .items-content {
           transform: translateX(0);
           transition: transform 0.4s ease-in-out;
        }
    }
}

问题原因 #

移除-show类时，.overlay的透明度过渡与.items-content的位移过渡同时触发，但遮罩的透明动画会同步覆盖内容的滑出动画，导致视觉上看不到滑出效果。此外，原CSS存在重复定义，且缺少基础布局样式，也会影响动画表现。

解决方案 #

调整过渡触发顺序，确保内容滑出完成后再隐藏遮罩，同时完善布局样式：

修改后的完整代码 #

<div class="overlay">
    <div class="items-content">
         <h1> hello </h1>
    </div>
</div>

.overlay {
    /* 基础遮罩布局 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* 默认隐藏，延迟透明度过渡，等内容滑出后再透明 */
    opacity: 0;
    transition: opacity 0.4s linear 0.4s;
    /* 隐藏时不阻止页面交互 */
    pointer-events: none;
}

.overlay.-show {
    /* 显示时立即透明化，无延迟 */
    opacity: 1;
    transition-delay: 0s;
    pointer-events: auto;
}

.overlay .items-content {
    /* 内容容器布局 */
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: #fff;
    /* 默认在右侧外，滑入起点 */
    transform: translateX(200%);
    transition: transform 0.4s ease-in-out;
}

.overlay.-show .items-content {
    /* 滑入终点 */
    transform: translateX(0);
}

额外说明 #

如果需要在动画完成后移除弹窗DOM，可通过transitionend事件监听：

const overlay = document.querySelector('.overlay');

function closeOverlay() {
    overlay.classList.remove('-show');
    // 监听过渡完成事件，仅触发一次
    overlay.addEventListener('transitionend', function handler() {
        // 这里执行移除DOM或其他后续操作
        // overlay.remove();
        overlay.removeEventListener('transitionend', handler);
    }, { once: true });
}

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