Обнаружение определенного ключевого кадра CSS3 с помощью JavaScript

Как определить, что анимация достигла определенного ключевого кадра? (Например, 50% или 75%).

Вот что я пробовал:

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

но он поддерживает только запуск анимации, итерацию и завершение анимации.

http://jsfiddle.net/W3y7h/294/


javascript css css-animations
person Alex    schedule 29.07.2016    source источник
comment
Насколько мне известно, единственный вариант - использовать таймер и использовать свои собственные расчеты. Только что проверил спецификации, похоже, есть атрибут elapsedTime, но все же он просто сообщит вам время, какой процент он представляет, все равно потребует вычислений.   -  person Harry    schedule 29.07.2016
comment
Приведите интересный пример вашей анимации.   -  person Shaggy    schedule 29.07.2016
comment
@Shaggy ты проверил скрипку?   -  person Alex    schedule 29.07.2016
comment
@Beckham: извините, не знаю, как я это пропустил!   -  person Shaggy    schedule 29.07.2016
comment
На сайте css-tricks.com/ есть полезные советы.   -  person CBroe    schedule 29.07.2016

Ответы (1)


arrow_upward
2
arrow_downward

Используя предоставленный пример Fiddle, вы, по сути, хотите знать, когда значение свойства bottom элемента #sun равно 100px. Вы можете сделать это, используя getComputedStyle(), чтобы проверить это значение. , очищая интервал, когда он равен 100px, а затем выполняем любой код, который вы хотите, например:

var style=window.getComputedStyle(document.getElementById("sun")),
	interval=setInterval(function(){
        if(parseInt(style.getPropertyValue("bottom"))===100){
            clearInterval(interval);
            console.log("50% reached");
        }
    },1);
#sun{
    animation:sunrise 1s ease;
    bottom:0;
    background:#ff0;
    border-radius:50%;
    height:50px;
    position:absolute;
    width:50px;
}
@keyframes sunrise{
    0%{
        bottom:0;
        left:0;
    }
    50%{
        bottom:100px;
    }
    100%{
        bottom:0;
        left:400px;
    }
}
<div id="sun"></div>

Чтобы проверить наличие нескольких значений, просто установите новый интервал. В случае вашего примера значение свойства bottom должно быть 50px, когда анимация завершена на 75%. При этом не всегда может быть точно 50px в каждом браузере, поэтому, вместо этого, учитывая, что мы знаем, что значение свойства bottom будет уменьшаться в этот момент, вместо этого проверьте, меньше ли оно или равно 50:

var style=window.getComputedStyle(document.getElementById("sun")),
	interval=setInterval(function(){
        if(parseInt(style.getPropertyValue("bottom"))===100){
            clearInterval(interval);
            console.log("50% reached");
            interval=setInterval(function(){
                if(parseInt(style.getPropertyValue("bottom"))<=50){
                    clearInterval(interval);
                    console.log("75% reached");
                }
            },1);
        }
    },1);
#sun{
    animation:sunrise 1s ease;
    bottom:0;
    background:#ff0;
    border-radius:50%;
    height:50px;
    position:absolute;
    width:50px;
}
@keyframes sunrise{
    0%{
        bottom:0;
        left:0;
    }
    50%{
        bottom:100px;
    }
    100%{
        bottom:0;
        left:400px;
    }
}
<div id="sun"></div>

person Shaggy    schedule 29.07.2016