transitionend от нескольких анимаций

[111]

Здравствуйте.
У меня есть транзишын:
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]

Чтобы не проверять свойство, можно удалять обработчик события после первого срабатывания

element.addEventListener("transitionend", function callback() {
	element.removeEventListener("transitionend", callback);
	…
});

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

[111]

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

[Octane]

Без разницы где. Если на него не останется ссылок, сборщик мусора его удалит из памяти. Можно и так расписать:

function unbind() {
	element.removeEventListener("transitionend", onTransitionEnd);
}

function onTransitionEnd() {
	unbind();
}

element.addEventListener("transitionend", onTransitionEnd);

[111]

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

[Octane]

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

[111]

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

[Octane]

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

Можно получить максимальное время transition'а распарсив строки:

getComputedStyle(element).transitionDuration
getComputedStyle(node).transitionDelay