Как запустить событие «animationend», если я не могу установить анимацию CSS?
Если я установлю анимацию CSS на «элемент», все в порядке. Если анимация Css недоступна, как она работает, как анимация с нулевыми секундами в ES5?
function run() { ... }
element.addEventListener('animationend', run);
Ответить на
@Анураг Шривастава,
Я ошибаюсь или у меня неправильный следующий код? В любом случае возвращаемое значение равно "".
var el1 = document.getElementById("notAnimation");
console.info(el1.style.animation);
var el2 = document.getElementById("onAnimation");
console.info(el2.style.animation);div {
padding: 10px;
margin: 20px;
}
#notAnimation {}
#onAnimation {
animation: scale 10s ease-in-out;
}
@keyframes scale {
0% {
transform: scale(1);
opacity: 1;
color: black;
}
50% {
transform: scale(0.95);
opacity: .4;
color: red;
}
100% {
transform: scale(1);
opacity: 1;
color: black;
}
}<div id = "notAnimation">
Not Animation
</div>
<div id = "onAnimation">
Animation
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете проверить, содержат ли element.style.WebkitAnimation и element.style.animation какое-либо значение, и выполнить run(), если значение равно ""
Редактировать Оказывается, .style вернет "" для любого значения. Что вам нужно, так это window.getComputedStyle() вместе с имуществом animationName. Если это none, анимации нет, иначе есть. Проверьте код ниже:
var el1 = document.getElementById("notAnimation");
console.info(window.getComputedStyle(el1)["animationName"])
var el2 = document.getElementById("onAnimation");
console.info(window.getComputedStyle(el2)["animationName"])div {
padding: 10px;
margin: 20px;
}
#notAnimation {}
#onAnimation {
animation: scale 10s ease-in-out;
}
@keyframes scale {
0% {
transform: scale(1);
opacity: 1;
color: black;
}
50% {
transform: scale(0.95);
opacity: .4;
color: red;
}
100% {
transform: scale(1);
opacity: 1;
color: black;
}
}<div id = "notAnimation">
Not Animation
</div>
<div id = "onAnimation">
Animation
</div>Он вернет "" только в том случае, если анимация не установлена, иначе будет возвращена строка, например. "myAnim 2s easy-in" Кроме того, вам необходимо проверить как .animation, так и .WebkitAnimation.
Я переставил вопрос и добавил «фрагмент кода», как вы сказали. Со мной что-то не так?
Спасибо за помощь. Теперь он работает нормально. Но автоматически ли это определяет различные значения анимации, такие как webkit, ms, o?
Я думаю, что да, но вы должны перепроверить, чтобы быть уверенным.
Да, но как этот процесс управляет значением анимации «элемента» файла css? В любом случае будет возвращено значение "".