удалить слушатель события итерации анимации для анимированного дочернего узла - PullRequest
0 голосов
/ 02 февраля 2019

СЦЕНАРИЙ : у меня есть верх / родитель <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 только к родительскому узлу и избежать его появления? ""наследуется" его дочерними узлами (так что я могу быть уверен, что сработает только его анимация, и мне даже не нужно будет заботиться о дочерних узлах в коде обработчика)?

Спасибо за вашу помощь, ребята

...