Question

SCENARIO ：我有一个顶部/父级<div>，上面有一个无限的CSS动画。它也有一些<div>作为子/子节点和一些（一个或多个）可能对他们以及一个无限CSS动画。

HTML摘录：

<div id="top_div" class="anim1">
 <div class="anim2">some more animated contents here</div>
 <div>(this gets animated by effect of its parent, of course)</div>
</div>

CSS摘录（只是有一个想法）：

#top_div.anim1 {animation: swinging .5s linear infinite alternate forwards;}
@keyframes swinging {to{transform:rotate(20deg);}}
.anim2 {/*...another different infinite animation here...*/}

现在的问题是：我添加了一个事件处理程序，因为我需要在每个父级动画迭代中都做某件事……而我只需要一个！问题是即使子节点无限动画反复迭代，事件也会触发。因此，当然，我决定检查事件是否与父节点的动画有关，但我也想尝试从子节点中删除事件处理程序。我正在使用以下 JavaSript代码：

function anim123(e){
  if (e.target == top_div && e.animationName == "swinging") do_what_I_need();
  else e.target.removeEventListener("animationiteration", anim123);
}
top_div.addEventListener("animationiteration",anim123);

else分支似乎没有任何作用，该事件在子节点动画迭代时继续触发...您能告诉我这是怎么回事吗？

也许我想我无法删除“不存在”的东西？（实际上，子节点确实没有附加事件处理程序，它们有点像“继承”其父节点那样……）甚至有可能删除那些“继承的”子事件侦听器/处理程序，还是我应该对do_what_I_need()触发时简单的“不做”感到满意吗？

哦，并且有可能仅将animationiteration事件处理程序附加到父节点，并避免其子节点“继承”它（这样我可以确定只有其动画会触发而且我什至不需要关心处理程序代码中的子节点）？

谢谢您的帮助

删除动画子事件节点到动画子节点

0 个答案: