Question

我正在尝试在按下此按钮时调用 CSS 动画，经过一些研究后，似乎 classList 是前进的方向。很晚了，我想我很愚蠢，但我无法让它工作。

HTML：

<body>
<img id="myID" class="mouse" src="mouse.png" onclick="ani()">
<script src="script.js"></script>
</body>

<head>
<link href="styles.css" rel="stylesheet"/>
</head>

JavaScript：

function ani()
{
  document.getElementById('myID').classList.add = 'animate';
}

CSS：

.animate
{
  animation: test 1s linear forwards;
}
@keyframes test
{
  100%
{
  transform: translateX(calc(8%));
}
}

Answer 1

add 是一个函数，所以你使用 classList 的方式需要稍微改变一下：

document.getElementById('myID').classList.add = 'animate';

到：

document.getElementById('myID').classList.add('animate');

function ani(){
  document.getElementById('myID').classList.add('animate');
}

.animate {
  animation: test 1s linear forwards;
}

@keyframes test {
  100% {
    transform: translateX(calc(8%));
  }
}

<body>
    <img id="myID" class="mouse" src="https://stock.wikimini.org/w/images/d/d4/Mickey_Mouse.png" onclick="ani()">
</body>

单击按钮时播放 CSS 动画不起作用

1 个答案: