如何添加类来实现动画效果

你可以使用 CSS 动画来为元素添加动画效果，并将动画效果封装在一个 CSS 类中。然后，你可以通过 JavaScript 来添加或删除该类，以启动或停止动画效果。

以下是一个示例，展示如何使用 CSS 动画和 JavaScript 来添加类并实现动画效果：

HTML：

<button id="my-button">开始动画</button>

<div id="my-element">这是一个带有动画效果的 div 元素。</div>

CSS：

/* 定义动画效果 */
@keyframes my-animation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 定义动画类 */
.my-animation {
  animation: my-animation 1s ease-in-out;
}

JavaScript：

// 获取按钮和元素
var button = document.getElementById("my-button");
var element = document.getElementById("my-element");

// 添加点击事件处理程序
button.addEventListener("click", function() {
  // 切换动画类
  element.classList.toggle("my-animation");
});

在这个示例中，我们首先定义了一个名为 `my-animation` 的 CSS 类，它包含了一个使用 `@keyframes` 定义的简单动画效果。然后，我们在 JavaScript 中获取了一个按钮和一个元素，并为按钮添加了一个点击事件处理程序。在事件处理程序中，我们使用 `classList.toggle()` 方法来切换元素的 `my-animation` 类，从而启动或停止动画效果。