用js更新css动画名称，动画不起作用

Question

我有一个问题，我想在单击按钮时制作动画。 CSS代码：

img {
  position: relative;
  width: 150px;
  right: 50px;
  z-index: 1;
  animation-duration: 2s;
}

@keyframes Loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这是我的JS代码：

function Loading() {
document.querySelector("img").style.animationName = "Loading";

setTimeout(() => {
    document.querySelector("img").style.animationName = "";
}, 2000);
}

Answer 1

我刚刚发现了问题，问题是img父级有一些属性：display: flex;调整内容：居中；对齐项目：居中。我删除了它，它起作用了。

Answer 2

您需要使用object.style.animation而不是animationName，如下所示：

document.querySelector('.objectName').style.animation;

由于某种原因，animationName 属性不起作用。