如何让JavaScript监听CSS transition结束，替代setTimeout方案？

你可以利用浏览器原生的transitionend事件实现需求，它会在CSS过渡动画完成后自动触发，完全不需要手动同步JS延迟和CSS过渡时长——修改CSS的transition-duration后，JS代码无需任何改动就能适配新的时长。

实现思路 #

1. 点击元素时，将颜色改为green，同时为元素绑定transitionend事件监听器
2. 在transitionend回调中，判断触发事件的属性是否为color（避免其他过渡属性干扰），随后恢复颜色为cyan，并移除事件监听器（防止重复触发）

完整代码示例 #

HTML

<h1 id="info-display"><span id="text">~ Words to Click. ~</span></h1>

CSS

#info-display{
    user-select: none;
    text-align: center;
    font: small-caps bold 5vw 'Courier New', Courier, monospace;
}
#text {
    color: Cyan;
    background-color: Black;
    padding: 0.1vw 1vw 0.1vw;
    border-radius: 25% 25% 15% 15%;
    transition-duration: 100ms;
}

JavaScript

const textEl = document.getElementById("text");

textEl.addEventListener("click", function() {
    textEl.style.color = "Green";
    
    // 定义过渡结束的回调函数
    function handleTransitionEnd(e) {
        // 只处理color属性的过渡结束
        if (e.propertyName === 'color') {
            textEl.style.color = "Cyan";
            // 移除事件监听器，避免重复绑定
            textEl.removeEventListener('transitionend', handleTransitionEnd);
        }
    }
    
    // 添加过渡结束事件监听
    textEl.addEventListener('transitionend', handleTransitionEnd);
});

补充说明 #

• transitionend事件会在每个过渡属性完成时触发，如果元素有多个过渡属性（比如同时过渡color和background-color），一定要通过propertyName判断目标属性，避免不必要的回调执行
• 移除事件监听器很关键，否则多次点击会绑定多个回调，导致颜色恢复逻辑重复触发

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