如何在JS函数输出新文本时触发关键帧动画重复执行

修改思路 #

• 将动画从div的默认样式中拆分出来，做成独立的CSS类，仅在需要时触发
• 点击按钮时更新文本，通过添加/移除动画类来触发单次动画，同时处理浏览器重绘问题确保动画能重复触发

完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    #output {
      position: relative;
    }

    /* 单次动画类 */
    .animate {
      animation: anim 1s linear;
    }

    @keyframes anim {
      from {
        top: 0px;
      }
      to {
        top: 100px;
      }
    }
  </style>
</head>
<body>
  <button type="button" id="btn">
    <p>点击触发函数</p>
  </button>
  <div id="output">Js输出显示在这里</div>

  <script>
    const btn = document.getElementById('btn');
    const outputDiv = document.getElementById('output');
    // 模拟不同输出内容
    const textPool = ['第一个输出', '第二个输出', '第三个输出', '更新后的文本'];
    let currentIndex = 0;

    btn.addEventListener('click', () => {
      // 更新div文本
      outputDiv.textContent = textPool[currentIndex];
      currentIndex = (currentIndex + 1) % textPool.length;

      // 触发动画：先移除类，强制重绘后再添加
      outputDiv.classList.remove('animate');
      void outputDiv.offsetWidth;
      outputDiv.classList.add('animate');
    });

    // 动画结束后清理类，避免影响下次触发
    outputDiv.addEventListener('animationend', () => {
      outputDiv.classList.remove('animate');
    });
  </script>
</body>
</html>

关键细节说明 #

• CSS动画调整：去掉原代码中的infinite，将动画定义在单独的类中，默认div不执行动画，只有添加类时才会运行一次
• JS触发逻辑：
  • 点击时先更新文本，再通过移除再添加动画类触发动画
  • void outputDiv.offsetWidth;是关键：强制浏览器重新计算元素布局，否则快速的移除/添加类操作会被浏览器忽略，导致动画不生效
  • 监听animationend事件，动画结束后自动移除类，保证每次点击都能重新触发动画

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