如何在Sports API更新比分时添加关键帧实现比分闪烁效果

核心思路 #

当Sports API返回新比分时，对比当前显示的旧比分，定位到发生变化的DOM元素，给它添加预定义的闪烁动画类，几秒后自动移除该类，完成闪烁效果。

1. 定义CSS关键帧动画 #

先写一个闪烁的动画效果，这里以透明度闪烁为例（也可以换成颜色变化、缩放等效果）：

/* 定义闪烁关键帧 */
@keyframes scoreFlash {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* 闪烁动画类 */
.score-flash {
  animation: scoreFlash 0.5s ease-in-out 3; /* 0.5秒每帧，循环3次 */
  /* 可选：添加边框或颜色高亮增强视觉效果 */
  border: 2px solid #ff4500;
}

2. 监听API比分更新并检测变化 #

假设你已经有调用Sports API的逻辑，在获取新数据后，对比新旧比分：

// 存储当前显示的比分（示例，根据你的数据结构调整）
let currentScores = {
  home: 0,
  away: 0
};

// 模拟API获取新比分的函数
async function fetchLatestScores() {
  const response = await fetch('/api/sports/scores'); // 替换为你的API地址
  const newScores = await response.json();

  // 对比新旧比分，找出变化项
  if (newScores.home !== currentScores.home) {
    triggerScoreFlash('home-score'); // 触发主队比分闪烁
  }
  if (newScores.away !== currentScores.away) {
    triggerScoreFlash('away-score'); // 触发客队比分闪烁
  }

  // 更新当前比分缓存
  currentScores = {...newScores};
}

3. 触发并自动终止闪烁动画 #

写一个工具函数，给目标元素添加动画类，然后自动移除：

function triggerScoreFlash(elementId) {
  const scoreElement = document.getElementById(elementId);
  if (!scoreElement) return;

  // 添加闪烁类
  scoreElement.classList.add('score-flash');

  // 动画结束后移除类（这里根据动画总时长设置，0.5s*3=1.5s，加0.1s缓冲）
  setTimeout(() => {
    scoreElement.classList.remove('score-flash');
  }, 1600);
}

注意事项 #

• 防抖处理：如果API更新频繁，给fetchLatestScores加防抖，避免短时间内多次触发闪烁。
• 动画自定义：可以修改@keyframes里的属性，比如把opacity换成background-color来实现背景闪烁，或者调整循环次数、时长适配你的UI风格。
• 数据结构适配：上面的示例是简化的主客队比分，实际项目中可能是多场次数据，需要遍历场次对比每个队的比分变化。

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