CSS3 animationStarted триггер события с задержкой 25/30 миллисекунд

Question

Я сделал JSFiddle, чтобы показать проблему http://jsfiddle.net/molokoloco/yvTje/

В нескольких словах я добавил слушателя в событие animationStart, добавил новый класс в элемент, а затем, в плагине, сделал:мне нужно проверить, есть ли у элемента анимация (может быть связана с классом), прежде чем делать что-то или нет.

Моя проблема в том, что мне нужно подождать 25/80 миллисекунд, прежде чем можно будет проверить, еслианимация запущена или нет ...

Что-то я делаю плохо или есть какие-то предложения?

var animationStarted = false,
    s = '';

var listener = function(e) {
    switch (e.type) {
        case "animationstart":
        case "webkitAnimationStart":
            // BUT "animationstart" do not trigger instantaneously
            // For the moment i compute 25 milliseconds on my Chrome & FF
            var diff = (new Date().getTime()) - s;
            console.log('animationStarted after ' + diff + ' ms'); // HERE THE RESULT : 30ms
            break;
    }
};

var setup = function() {
    var e = document.getElementById("watchme");
    e.addEventListener("animationstart", listener, false);
    e.addEventListener("webkitAnimationStart", listener, false);
    // HERE WE ADD THE CLASS
    e.className = "slidein";
    s = new Date().getTime(); // Time at witch the class (with anim) is applyed
};

setup();

Answer 1

Используйте обнаружение функций даже до того, как попытаетесь запустить анимацию.

var div = document.createElement("DIV");

div.style["animation"] = "animName 5s infinite";
div.style["WebkitAnimation"] = "animName 5s infinite";

if (div.style["animationDuration"] == "5s") {
    // Supports animation
} else  (div.style["WebkitAnimationDuration"] == "5s") {
    // Supports -webkit-animation
}

Этот тест проверяет способность браузера устанавливать отдельные атрибуты стиля, используя стенографию.Если вы просто установите значение и прочитаете его таким же образом, вы получите ложные срабатывания.

РЕДАКТИРОВАТЬ: Извините, неправильно понял проблему.

Что касается использования событий для проверки вещи, вывероятно, придется подождать несколько миллисекунд, независимо от того, что вы делаете ... Вы можете проверить сами определения стилей, используя document.styleSheets, но это будет довольно утомительно, в зависимости от специфики css.

var animationName = "";
for (var i = 0; i < document.styleSheets.length; ++i) {
    var sheet = document.styleSheets[i];
    var rules = sheet.cssRules || sheet.rules;
    for (var j = 0; j < rules.length; ++j) {
        var rule = rules[j];
        if (theElement.matchesSelector(rule.selectorText)) {
            var theStyle = rule.style;
            animationName = theStyle["WebkitAnimationName"];
        }
    }
}

Это довольно грубый способ сделать это, я знаю ...