Конец анимации CSS transition — jQuery

Конец анимации CSS transition — jQuery

С появлением CSS3 жизнь верстальщиков и front-end разработчиков сильно упростилась (или стала сложнее). Потому что в нашу жизнь ворвались новые возможности по реализации интерфейса. Один из наиболее значимых блоков - это css-анимация. Плавные переходы, трансформации и перемещения делают сайты "живыми" и интересными. Такая анимация не нагружает страницу и поэтому используется достаточно часто. Но нередки случаи, когда хотелось бы, чтобы наши скрипты, которые делают страницу по-настоящему интерактивной, умели "общаться" со стилями css, в частности с анимацией. Поэтому сегодня мы поговорим, как с помощью jQuery можно отследить конец анимации, реализованной с помощью CSS transition.

Для реализации анимации с помощью CSS transition, достаточно нужному элементу (пусть будет div class="elem") добавить значения стилей (для примера):

-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;

После этого нужно сделать изменение какого-нибудь свойства у элемента по событию - например сдвиг при смене класса или наведению на него. Как после этого отследить окончание сдвига?

Оказывается достаточно просто. С помощью jQuery это делается следующим образом:

$('.elem').on('transitionend webkitTransitionEnd oTransitionEnd', function () {
	//действие по окончании анимации
});

Но есть одно но. Этот код будет срабатывать в арифметической прогрессии столько раз, сколько будет вызвана анимация. Например, при первом вызове сработает 1 раз, при втором вызове уже 2 раза, при третьем - 3 и так далее. Как избежать этого? И сделать срабатывание функции только один раз при каждом событии анимации? Для этого модифицируем код:

$('.elem').on('transitionend webkitTransitionEnd oTransitionEnd', function () {
	//действие по окончании анимации
	$('.elem').off('transitionend webkitTransitionEnd oTransitionEnd');
});

Вот и все. Таким простым способом можно отловить конец анимации css с помощью javascript. Всем успехов!

26.03.17
Для просмотра сайта обновите браузер.