如何将CSS动画与JavaScript关联，点击按钮触发并关联startNewRound()

1. 确认CSS动画定义 #

你已定义vs-animation关键帧，只需给目标元素准备一个绑定该动画的类（若尚未设置）：

/* 触发动画的类 */
.vs-animate {
  animation-name: vs-animation;
  animation-duration: 1s; /* 按需调整动画时长 */
  animation-timing-function: ease; /* 可选：自定义动画曲线 */
  animation-fill-mode: forwards; /* 保持动画结束后的状态 */
}

/* 你已定义的关键帧示例 */
@keyframes vs-animation {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

2. HTML结构 #

准备触发按钮和需要执行动画的目标元素：

<button id="startRoundBtn">启动新回合</button>
<!-- 替换为你需要添加动画的DOM节点 -->
<div id="animationTarget">对战元素</div>

3. JavaScript关联逻辑 #

通过点击事件触发CSS动画，同时将startNewRound设为true：

// 初始化状态变量
let startNewRound = false;

// 获取DOM元素
const startBtn = document.getElementById('startRoundBtn');
const animateTarget = document.getElementById('animationTarget');

// 按钮点击事件处理
startBtn.addEventListener('click', () => {
  // 1. 触发CSS动画：给目标元素添加动画类
  animateTarget.classList.add('vs-animate');
  
  // 2. 设置startNewRound为true
  startNewRound = true;
  
  // 可选：动画结束后移除类，确保下次点击能重新触发动画
  animateTarget.addEventListener('animationend', () => {
    animateTarget.classList.remove('vs-animate');
  }, { once: true }); // 仅触发一次事件，避免重复绑定导致的异常
});

额外说明 #

• 若需要让按钮自身执行动画，只需将animateTarget替换为startBtn即可
• 若无需保留动画结束状态，可将animation-fill-mode设为none
• { once: true }确保animationend事件只执行一次，防止多次点击造成的事件堆积

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