Javascript 在缺少或最终完成CSS转换后执行代码

我试图在CSS转换完成后立即执行一些代码。问题是在某些情况下（不是由我决定的），不必发生转换。我如何知道什么时候可以期待过渡？我知道

transitionrun

和

transitionstart

事件，我尝试使用它们，但它们不起作用：

函数animateIn（元素、动作）{
var=false
设置超时（（）=>{
console.log（'timeout'，应为）
}, 0)
window.requestAnimationFrame（（）=>{
console.log（'raf'，应为）
})
元素addEventListener（'transitionrun'，（）=>{
期望值=真
console.log（'transitionrun'）
})
元素addEventListener（'transitionstart'，（）=>{
期望值=真
console.log（'transitionstart'）
})
元素addEventListener（'transitionend'，（）=>{
console.log（'transitionend'）
})
行动（）
}
var elem=document.getElementById（'main'）
元素addEventListener（'单击'，（）=>{
animateIn（elem，（）=>{
elem.classList.remove（'is-enter'）
})
})

#主{
背景：红色；
宽度：80px；
高度：80px；
过渡：背景轻松0.5s；
}
#main.is-enter{
背景：蓝色；
}

---

在Chrome（最新版本）、Firefox（最新版本）和IE11中，它似乎可以使用双

requestAnimationFrame

，即使是延迟转换：

功能检查转换（元素、动作）{
返回新承诺（（解决、拒绝）=>{
var-willTransition=false
var startHandler=函数（）{
willTransition=true
元素addEventListener（'transitionend'，函数endHandler（）{
元素removeEventListener（'TransitionEndHandler'，endHandler）
解析（真）
})
}
元素addEventListener（'transitionrun'，startHandler）
元素addEventListener（'transitionstart'，startHandler）
window.requestAnimationFrame（（）=>{
window.requestAnimationFrame（（）=>{
元素removeEventListener（'transitionrun'，startHandler）
元素removeEventListener（'transitionstart'，startHandler）
if（！willTransition）{
解析（false）
}
})
})
行动（）
})
}
函数绑定（elem）{
元素addEventListener（'单击'，（）=>{
检查转换（元素，（）=>{
elem.classList.remove（'is-enter'）
})。然后（状态=>{
console.log（'had transition:'，status）
})
})
}
绑定（document.getElementById（'main'））
绑定（document.getElementById（'delayed'））

.target{
显示：内联块；
宽度：80px；
高度：80px；
右边距：5px；
背景：红色；
}
.target.is-enter{
背景：蓝色；
}
#主要{
过渡：背景轻松0.5s；
}
#耽搁{
过渡：背景0.5s轻松0.4s；
}

---

在Chrome（最新版本）、Firefox（最新版本）和IE11中，它似乎可以使用双

requestAnimationFrame

，即使是延迟转换：

功能检查转换（元素、动作）{
返回新承诺（（解决、拒绝）=>{
var-willTransition=false
var startHandler=函数（）{
willTransition=true
元素addEventListener（'transitionend'，函数endHandler（）{
元素removeEventListener（'TransitionEndHandler'，endHandler）
解析（真）
})
}
元素addEventListener（'transitionrun'，startHandler）
元素addEventListener（'transitionstart'，startHandler）
window.requestAnimationFrame（（）=>{
window.requestAnimationFrame（（）=>{
元素removeEventListener（'transitionrun'，startHandler）
元素removeEventListener（'transitionstart'，startHandler）
if（！willTransition）{
解析（false）
}
})
})
行动（）
})
}
函数绑定（elem）{
元素addEventListener（'单击'，（）=>{
检查转换（元素，（）=>{
elem.classList.remove（'is-enter'）
})。然后（状态=>{
console.log（'had transition:'，status）
})
})
}
绑定（document.getElementById（'main'））
绑定（document.getElementById（'delayed'））

.target{
显示：内联块；
宽度：80px；
高度：80px；
右边距：5px；
背景：红色；
}
.target.is-enter{
背景：蓝色；
}
#主要{
过渡：背景轻松0.5s；
}
#耽搁{
过渡：背景0.5s轻松0.4s；
}