Javascript 如何在伪元素上检测animationend事件？

我知道如何使用常规DOM元素检测

animationend

事件，但是如何使用伪元素来检测呢

我知道要查找的事件是

animationend

，但是如何使用该事件将伪元素附加到处理程序

我试过以下方法，但似乎无法使其发挥作用

document.querySelector("#someSelector:after").addEventListener("animationend",...,false)

---

如何在普通JavaScript中做到这一点？

：在

之后，不能像选择DOM的一部分一样选择伪元素，因为简而言之，它们不是DOM的一部分。也就是说，有可能获得您期望的事件触发器，因为它们是在

：after

的“父级”上触发的

例如，如果在id为

'containybox'

的DOM元素上有

：after

，则可以抓取该DOM元素并在其

animationend

上触发。当

：after

的动画结束时，事件将触发

var containerBox = document.getElementById('containybox');    

containerBox.addEventListener('animationend', function() {
  console.log("Animation ended!");
});

完整工作片段：

var containerBox=document.getElementById（'containerBox'）；
containerBox.addEventListener（'animationend'，function（）{
log（“动画结束！”）；
});
containerBox.addEventListener（'transitionend'，function（）{
log（“转换结束！”）；
});
#containybox{
位置：相对位置；
宽度：100px；
高度：100px；
背景：#fadebc；
填充：10px；
文本对齐：居中；
}
#集装箱箱：之后{
内容：“标准aftermibob。”；
显示：块；
位置：固定；
左：120px；
宽度：100px；
高度：100px；
背景:#bcdefa；
动画：动画背景1000毫秒线性；
}
#containybox:悬停：之后{
背景：#bcfade；
过渡：背景色1000ms线性；
}
@关键帧动画背景{
从{
背景色：#000000；
}
到{
背景色：#bcdefa；
}
}

只是一个标准的集装箱箱。
您甚至可以从
AnimationEvent.pseudoElement
属性中分辨出动画的内容，该属性可以是空字符串，也可以是“/”之后“/”之前”。AnimationEvent对象作为第一个参数传递给事件侦听器。哎呀，Chrome中的
AnimationEvent
属性中缺少
pseudoElement
（错误）。在
TranstitionEvent
中，它同时出现在Chrome和Firefox中。