Javascript 侦听较长转换的transitionend事件

我想在下面的代码中跟踪较长的转换

请注意，在给定的转换中：

过渡：顶部0.3s缓进缓出，不透明度0.4s缓进缓出

顶部是较短的，不透明度是较长的过渡，我们希望检查不透明度过渡（如较长的过渡）何时完成：

函数prepareCoptionShow（）{
const preparecoption=document.querySelector（“.preparecoption”）；
preparecoption.classList.add（'preparecoptionshow'）；
PrepareCoption.addEventListener（'transitionend'，PrepareCoptionShowEnd）；
功能准备选项显示（e）{
log（“e.propertyName:”，e.propertyName）；
如果（e.propertyName=='opacity'）{
控制台日志（“内部转换”）；
} 
PrepareCoption.removeEventListener（“transitionend”，PrepareCoptionShowEnd）；
}
} 
setTimeout（（）=>PrepareCoptionShow（），2500）
.prepareCaption{
位置：相对位置；
过滤器：投影（2px 2px 2px#100021）投影（1px.05em 1px#0d021a）；
文本对齐：居中；
宽度：100%；
颜色：#f8f7fa；
保证金：0自动；
不透明度：0；
顶部：-2.5vh；
过渡：顶部0.3s缓进缓出，不透明度0.4s缓进缓出；
}
.准备选项演示{
不透明度：1；
顶部：0vh；
}

文本显示

在第一次
转换后，删除事件侦听器。这将导致无法捕获下一个
转换事件。如果在
If
语句中移动删除侦听器的行，它将触发这两个事件，并在
opacity
转换后的适当时刻停止侦听


函数prepareCoptionShow（）{
const preparecoption=document.querySelector（“.preparecoption”）；
preparecoption.classList.add（'preparecoptionshow'）；
PrepareCoption.addEventListener（'transitionend'，PrepareCoptionShowEnd）；
功能准备选项显示（e）{
如果（e.propertyName=='opacity'）{
console.log（例如propertyName）；
PrepareCoption.removeEventListener（“transitionend”，PrepareCoptionShowEnd）；
}    
}
} 
setTimeout（（）=>PrepareCoptionShow（），2500）
.prepareCaption{
位置：相对位置；
过滤器：投影（2px 2px 2px#100021）投影（1px.05em 1px#0d021a）；
文本对齐：居中；
宽度：100%；
颜色：#f8f7fa；
保证金：0自动；
不透明度：0；
顶部：-2.5vh；
过渡：顶部0.3s缓进缓出，不透明度0.4s缓进缓出；
}
.准备选项演示{
不透明度：1；
顶部：0vh；
}

文本显示

我没有注意到谢谢你。。。