Обработка событий CSS3 анимации в JavaScript
JavaScript

Обработка событий CSS3 анимации в JavaScript

Оригинал: How to Capture CSS3 Animation Events in JavaScript, Craig Buckler

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

Рассмотрим простую анимацию 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; }
}

Когда класс «enable» применяется к элементу с ID «anim», анимация с названием flash запускается три раза. Каждая итерация длится одну секунду, в течение которой элемент исчезает.

Во время анимации срабатывает три типа событий:

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 standard Firefox webkit Opera IE10
animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart
animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration
animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd

Самый простой способ манипуляции с префиксами — это вызов 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);
    }
}

Таким образом, кросс-браузерные обработчики событий могут быть навешены с помощью одной строки:


// добавление обработчиков событий
PrefixedEvent(anim, "AnimationStart", AnimationListener);
PrefixedEvent(anim, "AnimationIteration", AnimationListener);
PrefixedEvent(anim, "AnimationEnd", AnimationListener);

Объект Event

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

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

С помощью объекта Event мы можем определить, когда закончится анимация flash:


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

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

Пример работы с событиями CSS анимации

На странице c демонстрацией отображается кнопка. Когда пользователь нажимает на нее, кнопке добавляется класс enable, который начинает анимацию flash. Текущий статус анимации выводится в консоли по событиям. Когда анимация заканчивается, класс enable удаляется, поэтому кнопка может быть нажата снова.

Дайте мне знать, если встречали интересные примеры обработки событий CSS анимации.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться