如何用JavaScript实现单按钮启停CSS动画并切换按钮文本

嗨，刚接触JS不用慌，我来一步步帮你搞定这个需求～ 咱们只需要给按钮加个「状态判断」，就能让它在「启动动画」和「停止（移除动画）」之间切换，同时自动改按钮文本。

完整代码示例 #

先给你看修改后的完整代码，直接就能运行：

HTML（补个简单的结构方便测试）

<div id="kirby">🐰</div> <!-- 用表情代替图片，你可以换成自己的元素 -->
<button id="button1">启动动画</button>

CSS（和你的代码几乎一致，只是去掉了多余的分号）

#kirby {
  position: relative;
  width: 20%;
  /* 初始不启用动画，交给JS控制 */
}

@keyframes move {
  0% { left: 0%; }
  49.99999% { left: 65%; }
  50% { left: -65%; }
  100% { left: 0%; }
}

JavaScript（核心修改部分）

var kirby = document.querySelector("#kirby");
var button1 = document.querySelector("#button1");
// 搞个「开关变量」，记录动画当前是否在运行，初始是关闭状态（false）
var isAnimating = false;

button1.addEventListener("click", function (){
  // 判断当前动画状态：如果没在运行，就启动；如果在运行，就停止
  if (!isAnimating) {
    // 1. 给元素加上动画属性，和你原来的代码一样
    kirby.style.animation = "move 5s linear infinite";
    // 2. 按钮文本改成"stop"，提示用户现在可以停止
    button1.textContent = "stop";
    // 3. 更新开关状态：标记动画正在运行
    isAnimating = true;
  } else {
    // 1. 移除动画属性（不是暂停！），直接把animation设为空字符串就行
    kirby.style.animation = "";
    // 2. 按钮文本改回原来的"启动动画"
    button1.textContent = "启动动画";
    // 3. 更新开关状态：标记动画已经停止
    isAnimating = false;
  }
});

一步步解释核心逻辑 #

因为你刚学JS，我把每个部分拆开来讲：

1. 开关变量isAnimating：
   这个变量就像个小标签，告诉我们「现在动画是开着还是关着」。初始设为false，因为页面刚加载时动画没启动。

2. 点击事件的判断逻辑：
   用if (!isAnimating)检查——如果isAnimating是false（动画没运行），就执行启动动画的操作；否则执行停止操作。

3. 启动动画的操作：

   • 给kirby.style.animation赋值，和你原来的代码一样，把动画属性加上。
   • 把按钮文本改成"stop"，让用户一眼知道现在点击能停止动画。
   • 把isAnimating改成true，告诉程序「现在动画正在跑啦」。

4. 停止动画的操作：

   • 把kirby.style.animation设为空字符串，这样就直接移除了元素上的动画属性（不是暂停哦！暂停是用animation-play-state: paused，但你要的是移除，所以空字符串就够了），元素会立刻回到初始位置。
   • 把按钮文本改回"启动动画"，提示用户可以再次启动。
   • 把isAnimating改回false，告诉程序「动画已经停了」。

小补充 #

如果你担心元素的style里有其他动画相关属性，也可以用kirby.style.removeProperty("animation")来移除，效果和设为空字符串是一样的，新手用空字符串更直观～

内容的提问来源于stack exchange，提问作者Agnut.