JS 如何通过点击改变所有相同class的animation

要通过点击改变所有相同 class 的 animation，你可以通过以下步骤来实现：

1. 首先，你需要给你想要改变 animation 的元素添加相同的 class 名称。

2. 接着，你可以使用 JavaScript 中的 `querySelectorAll` 方法来获取所有拥有该 class 名称的元素。

3. 然后，你可以使用 `forEach` 方法遍历每个元素，并为每个元素添加一个新的 class 名称来改变它们的 animation。

以下是一个简单的示例代码，可以帮助你更好地理解这个过程：

HTML 代码：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<button id="btn">点击更改 animation</button>

CSS 代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: myAnimation 1s linear infinite;
}

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

.box.new-animation {
  animation: myNewAnimation 1s linear infinite;
}

@keyframes myNewAnimation {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

JavaScript 代码：

const boxes = document.querySelectorAll('.box');
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  boxes.forEach(box => {
    box.classList.add('new-animation');
  });
});

当你点击按钮时，所有拥有 `.box` 类名的元素都将被添加 `.new-animation` 类名，从而改变它们的 animation。