Javascript 具有CSS转换和transitionend事件的竞争条件-找不到解决方案

我想大多数人都知道，在向DOM添加元素后，如果不要求计算样式，就无法触发转换。好的，我明白了，这个问题不知怎么地是相关的

我只需要依赖JS'transitionend'事件在转换结束后从DOM中删除一个元素（淡出效果）。 问题是添加CSS类并删除它（没有计时器）不会触发转换，因此事件永远不会被触发，让元素永远留在DOM中

我甚至尝试使用setTimeout（f，0）和requestAnimationFrame（f）删除添加后的类，并让转换开始，但一点运气都没有。 在添加/删除类之前和之后，我甚至组合调用getComputedStyle来触发重新绘制。还是不走运

例如：

我发现的唯一丑陋的解决方案是使用setTimeout，至少有50毫秒的延迟。但我们使用的测试框架在和DOM交互之前应该等待50毫秒，这根本不是一个可行的解决方案

有人知道我如何处理这种情况吗？为什么没有任何transitionstart事件

pd：在铬39中测试

---

谢谢。

好的，我想我现在理解了您的需求：您在示例代码中使用了hover类，但我假设实际上您希望使用：hover伪类来触发淡入淡出过渡。但是您担心，如果用户很快（<50毫秒）将鼠标移走，transitionend事件将不会被发送

答案是不要使用：悬停。相反，添加鼠标悬停侦听器并手动添加导致淡入淡出过渡的类，但不要删除它。这样，淡入淡出转换就可以保证运行到完成，并且transitionend事件肯定会被触发

例如

var-button=document.querySelector（'button'）；
addEventListener（'mouseover'，function（）{
button.classList.add（'bye-bye'）；
});
按钮。addEventListener（'transitionend'，函数（e）{
控制台日志（e）；
按钮.parentNode.removeChild（按钮）；
});

一个有效的例子是具有fadeIn（）和fadeOut（）方法的组件。如果按顺序调用这些方法，则永远不会调用事件侦听器。这需要实际显示转换，还是在移除类时仅移除元素？当然，我希望发生转换。但我仍然不明白的是，如果用户设法在不到50毫秒的时间内触发这些调用会发生什么。。。事件是否执行？

var button = document.querySelector('button');

button.addEventListener('transitionend', function(e) { // this never gets called
    console.log(e);
    button.parentNode.removeChild(button);
});

button.classList.add('hover');
button.clientWidth;
button.classList.remove('hover');