單擊按鈕時播放 CSS 動畫不起作用

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 個解決方案

解決方案1
2 2021-07-22 21:30:27

單擊按鈕時播放 CSS 動畫不起作用

問題描述

1 個解決方案

解決方案1 2 2021-07-22 21:30:27

解決方案1
2 2021-07-22 21:30:27