javascript - How to fire "animationend" event, when I can't set a CSS animation?

Question

If I set the css animation to "element", it's fine. If the Css animation is not available, how does it function fire like a zero seconds animation in the ES5?

function run() { ... }

element.addEventListener('animationend', run);

---

Reply for

@Anurag Srivastava,

Am I wrong idea or do I have the following code wrong? Either way, the return value is "".

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>

标签： javascriptcss-animationsdom-events

Answer 1

您可以检查是否包含任何值并element.style.WebkitAnimation在值为“”时执行element.style.animationrun()

编辑结果.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>