当我无法设置 CSS 动画时，如何触发“animationend”事件？

Question

如果我将 css 动画设置为“元素”，就可以了。如果 Css 动画不可用，它如何像 ES5 中的零秒动画一样触发？

function run() { ... }

element.addEventListener('animationend', run);

---

回复

@Anurag Srivastava，

我是错误的想法还是我有以下代码错误？无论哪种方式，返回值都是“”。

function run() { ... }

element.addEventListener('animationend', run);

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;
    }
}

Answer 1

您可以检查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>