Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.04.2014, 21:28
111 111 вне форума
Интересующийся
Отправить личное сообщение для 111 Посмотреть профиль Найти все сообщения от 111
 
Регистрация: 24.02.2014
Сообщений: 10

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') { ... } }

действительно единственное?
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 14.04.2014, 22:01
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

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

Интереснее ситуация, когда время анимации разное, как определить тогда, что все анимации закончились?
Ответить с цитированием
  #3 (permalink)  
Старый 14.04.2014, 22:16
111 111 вне форума
Интересующийся
Отправить личное сообщение для 111 Посмотреть профиль Найти все сообщения от 111
 
Регистрация: 24.02.2014
Сообщений: 10

Хм, интересный ход, спасибо.
Кстати, а есть ли разница, обявлен ли обработчик в теле какой-то функции или, так сказать, в голом скрипте? И что с ним происходит после того, как эта функция выполнилась и вернула результат? И нужно ли разуплотнять обработчик обязательно в теле той же самой функции или пофиг?
Спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 14.04.2014, 22:40
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

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

function onTransitionEnd() {
	unbind();
}

element.addEventListener("transitionend", onTransitionEnd);
Ответить с цитированием
  #5 (permalink)  
Старый 14.04.2014, 22:41
111 111 вне форума
Интересующийся
Отправить личное сообщение для 111 Посмотреть профиль Найти все сообщения от 111
 
Регистрация: 24.02.2014
Сообщений: 10

Ясно. Спасибо вам большое.
Ответить с цитированием
  #6 (permalink)  
Старый 14.04.2014, 22:47
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

кстати, есть событие animationend
Ответить с цитированием
  #7 (permalink)  
Старый 15.04.2014, 21:22
111 111 вне форума
Интересующийся
Отправить личное сообщение для 111 Посмотреть профиль Найти все сообщения от 111
 
Регистрация: 24.02.2014
Сообщений: 10

Да нет, решение с удалением обработчика внутри него же мне подходит идеально. Спасибо.
Ответить с цитированием
  #8 (permalink)  
Старый 22.04.2014, 07:14
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Сообщение от Octane
Интереснее ситуация, когда время анимации разное, как определить тогда, что все анимации закончились?
Можно получить максимальное время transition'а распарсив строки:
getComputedStyle(element).transitionDuration
getComputedStyle(node).transitionDelay

Последний раз редактировалось Octane, 22.04.2014 в 07:23.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прогресс бар для загрузки нескольких файлов через XHR Ваяс AJAX и COMET 0 04.12.2013 11:03
Чтобы функция выполнялась в нескольких textarea Авас Элементы интерфейса 10 20.10.2013 18:10
Можно ли в dojo/fx::chain() изменять (добавлять, удалять) массив анимаций? den_zm Dojo toolkit 0 19.04.2013 14:46
анимацию изображения с подсчетом количества анимаций flasher167 Общие вопросы Javascript 12 18.04.2013 20:45
Сложение нескольких значений элементов frolvict jQuery 2 04.12.2010 10:52