Почему возникает бесконечная transition анимация?

Question

[etthree]

Собственно в примере котором я набросал на jsfiddle все видно: https://jsfiddle.net/etthree/uhf32p84/

После завершения первой анимации я делаю следующую по событию transitionend и функцией с условиями, но вместо того что бы просто выполнить это условие и применить изменение, оно запускает это функцию бесконечно, вопрос, почему?

Answer 1

[0xD34F]

Потому что каждая анимация оканчивается событием transitionend. И вы все их обрабатываете, переключая значение transform, и, тем самым, запуская следующую анимацию. Вешайте обработчик события, который срабатывает однократно - добавьте в вызов addEventListener в качестве третьего аргумента { once: true }.

Comments

[etthree]

Спасибо, видимо недостаток сна сказался на внимательности, так как думал что уже пробовал once: true и он не сработал, пора заканчивать так делать... Еще раз, спасибо за быстрый ответ, теперь я могу спать спокойно...