0

场景：我有一个顶部/父级<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仅将事件处理程序附加到父节点并避免它被其子节点“继承”（这样我可以确定只有它的动画会触发，我什至不需要关心处理程序代码中的子节点）？

谢谢你们的帮助

4

0 回答 0