Как запустить событие «animationend», когда я не могу установить анимацию CSS? - PullRequest
Новая
       36

Как запустить событие «animationend», когда я не могу установить анимацию CSS?

0 голосов
/ 05 марта 2019

Если я установлю анимацию CSS на «element», это нормально.Если анимация Css недоступна, как она работает, как анимация с нулевыми секундами в ES5? 

function run() { ... }

element.addEventListener('animationend', run);

Ответ за

@ Anurag Srivastava,

Я ошибаюсь или у меня неправильный код?В любом случае, возвращаемое значение равно "". 

var el1 = document.getElementById("notAnimation");

console.log(el1.style.animation);

var el2 = document.getElementById("onAnimation");

console.log(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>

1 Ответ

0 голосов
/ 05 марта 2019

Вы можете проверить, содержат ли element.style.WebkitAnimation и element.style.animation какое-либо значение, и выполнить run(), если значение равно ""

Редактировать Оказывается, что .style вернется "«для любой стоимости.Вам нужно window.getComputedStyle() вместе со свойством animationName.Если это none, анимация отсутствует, иначе есть.Проверьте код ниже: 

var el1 = document.getElementById("notAnimation");
console.log(window.getComputedStyle(el1)["animationName"])

var el2 = document.getElementById("onAnimation");
console.log(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>
...