如何在CSS transition动画结束后应用overflow: unset?

以下两种方案均可实现需求：

方案1：纯CSS实现（无需JavaScript） #

核心思路是用@keyframes动画替代单属性transition，利用关键帧精确控制不同时间节点的属性值，动画结束后通过forwards属性保留最终状态。
完整代码如下：

#slide-buttons.horizontal {
    max-width: 0;
    overflow: hidden;
}
#slide-buttons.horizontal.slide-in {
    /* 动画时长与原过渡时长一致为0.9s，forwards保留动画最终状态 */
    animation: slideIn 0.9s ease-out forwards;
}
@keyframes slideIn {
    0% {
        max-width: 0;
        overflow: hidden;
    }
    /* 动画结束前一刻都保持overflow为hidden，避免提前切换 */
    99.9% {
        max-width: 1000px;
        overflow: hidden;
    }
    100% {
        max-width: 1000px;
        overflow: unset;
    }
}

• 优点：实现成本低，无额外JS开销，性能优异
• 缺点：过渡时长调整需要同步修改动画配置，灵活性稍弱

方案2：JavaScript监听transitionend事件实现 #

核心思路是监听max-width属性的过渡结束事件，回调中动态修改overflow属性，逻辑更可控。
首先修改CSS代码，新增单独控制overflow的类：

#slide-buttons.horizontal {
    max-width: 0;
    transition: max-width 0.9s ease-out;
    overflow: hidden;
}
#slide-buttons.horizontal.slide-in {
    max-width: 1000px;
}
/* 单独控制overflow的类 */
#slide-buttons.horizontal.overflow-visible {
    overflow: unset;
}

对应JS代码如下：

const slideMenu = document.querySelector('#slide-buttons.horizontal');

// 监听过渡结束事件
slideMenu.addEventListener('transitionend', (e) => {
    // 仅响应max-width属性的过渡结束，且仅在菜单展开状态下生效
    if (e.propertyName === 'max-width' && slideMenu.classList.contains('slide-in')) {
        slideMenu.classList.add('overflow-visible');
    }
});

// 菜单收起逻辑示例，注意要先还原overflow再触发宽度过渡
function hideSlideMenu() {
    slideMenu.classList.remove('overflow-visible');
    // 加入10ms延时保证overflow先生效，避免收起过程中内容溢出
    setTimeout(() => {
        slideMenu.classList.remove('slide-in');
    }, 10);
}

• 优点：灵活性高，过渡时长可动态调整，逻辑可自定义扩展
• 缺点：需要额外编写JS代码

注意事项 #

• 纯CSS方案中使用99.9%的关键帧而非100%前一帧，是为了避免部分浏览器的动画精度问题导致overflow提前切换出现内容闪烁
• JS方案中一定要对transitionend事件的propertyName做过滤，避免元素上其他属性的过渡触发本次回调逻辑

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