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