Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   transitionend от нескольких анимаций (https://javascript.ru/forum/events/46557-transitionend-ot-neskolkikh-animacijj.html)

111 14.04.2014 22:28

transitionend от нескольких анимаций
 
Здравствуйте.
У меня есть транзишын:
transition: width .3s, height .3s, left .3s, top .3s;

Я вешаю на это обработчик:
obj.box.addEventListener("transitionend", Show, false);

И конечно он срабатывает 4 раза. Возможно ли вешать обработчик только на transitionend с определенным propertyName или единственное решение, которое я нашел в сети:
function Show(e) { if (e.propertyName == 'width') { ... } }

действительно единственное?
Спасибо.

Octane 14.04.2014 23:01

Чтобы не проверять свойство, можно удалять обработчик события после первого срабатывания
element.addEventListener("transitionend", function callback() {
	element.removeEventListener("transitionend", callback);
	…
});

Интереснее ситуация, когда время анимации разное, как определить тогда, что все анимации закончились?

111 14.04.2014 23:16

Хм, интересный ход, спасибо.
Кстати, а есть ли разница, обявлен ли обработчик в теле какой-то функции или, так сказать, в голом скрипте? И что с ним происходит после того, как эта функция выполнилась и вернула результат? И нужно ли разуплотнять обработчик обязательно в теле той же самой функции или пофиг?
Спасибо.

Octane 14.04.2014 23:40

Без разницы где. Если на него не останется ссылок, сборщик мусора его удалит из памяти. Можно и так расписать:
function unbind() {
	element.removeEventListener("transitionend", onTransitionEnd);
}

function onTransitionEnd() {
	unbind();
}

element.addEventListener("transitionend", onTransitionEnd);

111 14.04.2014 23:41

Ясно. Спасибо вам большое.

Octane 14.04.2014 23:47

кстати, есть событие animationend

111 15.04.2014 22:22

Да нет, решение с удалением обработчика внутри него же мне подходит идеально. Спасибо.

Octane 22.04.2014 08:14

Цитата:

Сообщение от Octane
Интереснее ситуация, когда время анимации разное, как определить тогда, что все анимации закончились?

Можно получить максимальное время transition'а распарсив строки:
getComputedStyle(element).transitionDuration
getComputedStyle(node).transitionDelay


Часовой пояс GMT +3, время: 16:16.