Статьи

Как захватить события анимации CSS3 в JavaScript

Сентябрь 24, 2018

CSS3-анимации легко и быстро реализуются, но, в отличие от JavaScript, у вас нет покадрового управления. К счастью, вы можете применить обработчики событий к любому элементу, чтобы определить состояние анимации. Это позволяет детально управлять, например, воспроизводить различные анимации в последовательности.

Рассмотрим эту простую CSS3-анимацию: 

#anim.enable
{
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* animation */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

Когда класс enableanimflash запускается три раза. Каждая итерация длится одну секунду, в течение которой элемент исчезает, а затем в.

При возникновении анимации запускаются три типа событий:

animationstart 

 var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

Событие animationstart вызывается при первом запуске анимации.

animationiteration 

 anim.addEventListener("animationiteration", AnimationListener, false);

Событие animationiteration вызывается в начале каждой новой итерации анимации, т.е. каждой итерации, кроме первой.

animationend 

 anim.addEventListener("animationend", AnimationListener, false);

Событие animationend вызывается, когда заканчивается анимация.

Совместимость браузера

На момент написания статьи Firefox, Chrome, Safari, Opera и IE10 поддерживают анимацию CSS3 и соответствующие обработчики событий. Кроме того, Opera, IE10 и браузеры webkit используют префиксы и вносят несколько изменений в регистр для хорошей меры…

Стандарт W3C Fire Fox WebKit опера IE10
animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart
animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration
animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd

Самый простой способ обойти префикс shenanigans — вызвать addEventListener для всех имен с префиксом и без префикса, используя пользовательскую функцию: 

 var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
	for (var p = 0; p < pfx.length; p++) {
		if (!pfx[p]) type = type.toLowerCase();
		element.addEventListener(pfx[p]+type, callback, false);
	}
}>code>

Кросс-браузерные обработчики событий теперь можно назначать с помощью одной строки кода: 

 // animation listener events
PrefixedEvent(anim, "AnimationStart", AnimationListener);
PrefixedEvent(anim, "AnimationIteration", AnimationListener);
PrefixedEvent(anim, "AnimationEnd", AnimationListener);

Объект события

В приведенном выше коде функция AnimationListener вызывается всякий раз, когда происходит событие анимации. Объект события передается как один аргумент. Помимо стандартных свойств и методов, он также обеспечивает:

  • animationName : имя анимации CSS3 (например, flash )
  • elapsedTime : время в секундах с момента запуска анимации.

Поэтому мы можем определить, когда заканчивается анимация флеш-памяти , например, 

 if (e.animationName == "flash" && 
    e.type.toLowerCase().indexOf("animationend") >= 0) {
    ...
}

Код может, например, удалить существующий класс или применить другую анимацию CSS3 в определенной последовательности.

Просмотр анимационных событий CSS3 в демонстрации JavaScript

На демонстрационной странице отображается кнопка. При нажатии переключается класс «enable», который запускает флэш- анимацию. Состояние отображается в консоли при запуске события анимации. Когда анимация заканчивается, класс «enable» удаляется, поэтому можно снова нажать кнопку.

Дайте мне знать, если вы используете анимацию захвата событий в каких-либо интересных проектах.

И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .

Комментарии к этой статье закрыты. У вас есть вопрос о CSS? Почему бы не спросить об этом на наших форумах ?

39
Share: