Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/460.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/32.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在psuedo元素上触发动画事件?_Javascript_Css_Css Animations_Pseudo Element - Fatal编程技术网

Javascript 在psuedo元素上触发动画事件?

Javascript 在psuedo元素上触发动画事件?,javascript,css,css-animations,pseudo-element,Javascript,Css,Css Animations,Pseudo Element,我观察到一些关于动画事件的不一致行为 演示: 在Chrome中,我看到一个webkitAnimationIteration事件用于fly的每个迭代,另外还有webkitAnimationIteration事件用于rainbow Firefox与Chrome相同,但显然它会触发animationiteration事件,而不是webkitAnimationIteration 然而,IE似乎没有为飞行动画触发任何事件,只为主要元素的彩虹动画触发任何事件 哪种行为是正确的 此外,如果main元素和psu

我观察到一些关于动画事件的不一致行为

演示:

在Chrome中,我看到一个
webkitAnimationIteration
事件用于
fly
的每个迭代,另外还有
webkitAnimationIteration
事件用于
rainbow

Firefox与Chrome相同,但显然它会触发
animationiteration
事件,而不是
webkitAnimationIteration

然而,IE似乎没有为
飞行
动画触发任何事件,只为主要元素的
彩虹
动画触发任何事件

哪种行为是正确的


此外,如果main元素和psuedo元素都使用相同的动画(但可能使用不同的时间或方向),我如何区分Firefox和Chrome中触发的动画?

有时,我似乎应该在发布之前进行RTFM

具体来说

从这里,我发现:

  • 当伪元素迭代动画时触发事件是正确的

  • 事件对象有一个
    伪元素
    属性,它可以区分主元素和它的
    ::before
    /
    ::after
    伪元素。Chrome不支持!伙计们,这很重要,我们应该实现这一点

  • 正确的拼写是“伪”。不是“psuedo”。红色的曲线意味着拼写错误,尼特,请注意