:after 伪类的animation事件不触发

在手机端,为了减少不必要的dom结构,我们时常会用到:before和:after伪类,这次在开发h5页面的时候,发现了after伪类的一个小问题。

当给一个元素增加伪类的时候,如果给伪类增加了animation属性,并且给该元素绑定了animationEnd或者-webkit-animation事件。哦,那么恭喜你,问题来了,在android 中该事件是不会触发的。在iOS下,完全正常。

解决方案: 对有animation属性,且需要监控其是否执行完成的元素,不要使用:after/:before伪类来制作元素的动画。

Table of Contents