Почему событие срабатывает два раза?

Question

[dmitriyivvvv]

Добрый вечер не могу разобраться почему в следующем коде, событие transitionend срабатывает два раза.
JSFIDDLE

Почему когда происходит transitionend и вызывается removeTransition, console.log(e) выводит следующее:


Т.е в консоли видно что все transition дублируются, почему так происходит?

Answer 1

[Никита Егоров]

Не совсем понятно, что дублируется. PropertyName у всех разных => все окей. Выложите код на jsfiddle, что бы можно было потыкать

Comments

[dmitriyivvvv]

Добавил

[Никита Егоров]

dmitriyivvvv, они не

дублируются

(если что, дубль - совокупность из двух каких-либо предметов).

Все правильно. Несколько анимаций, несколько event'ов. Читайте документацию - https://developer.mozilla.org/en-US/docs/Web/Event...

[dmitriyivvvv]

Никита Егоров, посмотрите внимательно на скриншот, а точнее на propertyName. Там должно быть 6 а их 12 и они повторяются. Свойств всего 6: box-shadow, transform, border-right-color, border-left-color, border-top-color, border-bottom-color. Но они дублируются.

[Никита Егоров]

dmitriyivvvv, ааа, я понял, не заметил. Дело в том, что анимация заканчивается, после вы удаляете класс и заканчивается уже другая анимация (кнопка приходит в прежнее состояние).

Попробуйте не удалять класс playing и увидите всего 6 сообщений.

https://jsfiddle.net/Svupol/Ltvwa32y/17/

[dmitriyivvvv]

Никита Егоров, Точно, мда надо же мне было так затупить