remove an animation iteration event listener to animated child node

42
February 03, 2019, at 4:20 PM

SCENARIO: I have a top/parent <div> that has an infinite CSS animation on it. It also has some <div> as sub/child nodes and some (one or more) might have as well an infinite CSS animation on them.

HTML excerpt:

<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 excerpt (just to have an idea):

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

NOW THE QUESTION IS: I added an event handler 'cause I need to do something every parent animation iteration ... and I only need that one! The problem is the event triggers even when child nodes infinite animations iterate... So, of course, I decided to check if the event is related to the parent node's animation or not but I also would like to try to remove somehow the event handler from the child nodes. I'm using the following JavaSript code:

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);

The else branch doesn't seem having any effect there, the event continues to trigger when child nodes animation iterates... Can you tell me what's wrong with it?

Maybe I guess I can't remove something that "doesn't really exist"? (and, indeed, the child nodes don't really has an event handler attached, they kinda "inherit" that from their parent so...) Is it even possible to remove those "inherited" child event listeners/handler or should I be content with the simple "not doing" the do_what_I_need() when they trigger?

Oh, and would it ever be possible to attach the animationiteration event handler to the parent node only and avoid it to be "inherited" by its child nodes (so that I can be sure only its animation will trigger and I wouldn't even need to care about child nodes in the handler code)?

Thank you for your help guys

READ ALSO
android.view.InflateException: Binary XML file line #2: Binary XML file line #2: Error inflating class android.support.v4.widget.DrawerLayout

android.view.InflateException: Binary XML file line #2: Binary XML file line #2: Error inflating class android.support.v4.widget.DrawerLayout

I experienced this error while working on an android food ordering app in android studio 33:

32
data is not inserted correctly in csv

data is not inserted correctly in csv

When i add data into csv programmatically it gives me below issue:

32
how to convert php values to json encode please check example below

how to convert php values to json encode please check example below

how to convert php array values to json encode,we can ignore numeric(price) values

26
I need help solving the error with my PHP code [duplicate]

I need help solving the error with my PHP code [duplicate]

This question already has an answer here:

19