Статьи

CSS3 анимация и JavaScript API

Октябрь 21, 2018

Ранее я писал о CSS3 Animation Events в июне 2012 года, но браузеры пошли дальше, и имеет смысл вернуться к этой теме в рамках этой серии.

Хотя CSS3-анимации обеспечивают разумный контроль, часто необходимо добавить взаимодействие или определить определенную последовательность наборов ключевых кадров, которые воспроизводятся один за другим. Например, вы можете реализовать Логово Дракона в CSS3; анимация воспроизводится в ответ на движение клавиатуры или джойстика пользователя.

Типы событий

Существует три типа событий, которые вы можете записать на анимированный элемент:

  • animationstart — срабатывает при первом запуске анимации
  • animationiteration — срабатывает в начале каждой итерации (кроме первой)
  • animationend — срабатывает, когда анимация завершена (при условии, что она когда-либо будет).

Кросс-браузерная совместимость

Три типа событий поддерживаются Firefox, IE10 и Opera 12.

К сожалению, Chrome, Safari и Opera 15+ все еще требуют префикса webkit и добавления верблюжьего корпуса, чтобы сделать вашу жизнь немного сложнее: webkitAnimationStart , webkitAnimationIteration и webkitAnimationEnd .

Следовательно, в настоящее время вы должны определить прослушиватели событий для обоих наборов браузеров: 

// animated element
var anim = document.getElementById("myelement");

// webkit events
anim.addEventListener("webkitAnimationStart", AnimationListener);
anim.addEventListener("webkitAnimationIteration", AnimationListener);
anim.addEventListener("webkitAnimationEnd", AnimationListener);

// standard events
anim.addEventListener("animationstart", AnimationListener);
anim.addEventListener("animationiteration", AnimationListener);
anim.addEventListener("animationend", AnimationListener);

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

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

  • animationName : CSS3 анимация @keyframes name
  • elapsedTime : время в секундах с момента запуска анимации.

Одинаковые имена свойств доступны во всех браузерах.

Поэтому мы можем реагировать соответствующим образом, например, когда анимация «flash» @keyframes заканчивается на #myelement: 

 function AnimationListener(e) {
	var
		t = e.target,
		name = e.animationName,
		end = (e.type.toLowerCase().indexOf("animationend") >= 0);
		
	if (end && name == "flash" && t.id == "myelement") {
		// do something
	}
}

Посмотреть демонстрацию анимационных событий CSS3 …

На демонстрационной странице отображается кнопка. При нажатии включается класс «enable», который запускает анимацию @keyframes с именем «flash». Имя анимации, тип и истекшее время отображаются в консоли при запуске события анимации. Как только анимация заканчивается, класс «enable» удаляется из кнопки, чтобы его можно было снова щелкнуть.

Если вы следили за этой серией, вы должны знать все о переходах и анимации CSS3. Пожалуйста, разместите ссылки на свои демонстрации в комментариях ниже.

31
Share: