不使用jQuery、ES5无Promise：CSS过渡完成后执行DOM移除的实现

嘿，这个问题我太懂了！你现在的代码之所以看不到过渡效果就直接把容器删掉，是因为设置opacity: 0之后立刻执行了removeChild——浏览器根本没来得及跑完那1秒的过渡动画。

不用折腾自定义事件，原生的transitionend事件就是为这种场景设计的，它会在CSS过渡完全结束后触发，完全满足你的要求：基于ES5实现、不用Promise、也不用jQuery，而且本质上就是用回调函数来实现的。

修改后的完整代码 #

var myContainer = document.getElementById("my-container");
myContainer.style.opacity = 1;
myContainer.style.transition = "opacity 1s";

var myButton = document.getElementById("myButton");
myButton.addEventListener('click', hideContainer);

function hideContainer() {
    // 触发透明度过渡动画
    myContainer.style.opacity = 0;
    
    // 定义过渡完成后的回调函数
    function handleTransitionEnd() {
        // 从DOM中移除容器
        document.body.removeChild(myContainer);
        // 移除事件监听，避免后续重复触发
        myContainer.removeEventListener('transitionend', handleTransitionEnd);
    }
    
    // 给容器添加过渡完成事件监听
    myContainer.addEventListener('transitionend', handleTransitionEnd);
}

关键细节说明 #

• handleTransitionEnd就是你要的回调函数，它只会在过渡真正完成后才执行移除容器的操作。
• 一定要记得在回调里移除transitionend监听，不然如果后续容器还有其他过渡操作，这个回调会被重复触发，导致错误。
• 如果以后需要同时过渡多个CSS属性，还可以在回调里通过event.propertyName判断是不是你要监听的属性，比如只在opacity过渡完成后执行操作：

function handleTransitionEnd(event) {
    if (event.propertyName === 'opacity') {
        document.body.removeChild(myContainer);
        myContainer.removeEventListener('transitionend', handleTransitionEnd);
    }
}

这样就能完美实现“容器仅在CSS过渡完成后才从DOM中移除”的需求啦！

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