如何用jQuery或JS检测CSS动画完成？含逐字显示后触发定时器需求

嘿，我来帮你搞定这两个问题！

CSS动画结束时会触发特定的事件，我们可以用jQuery绑定这些事件来检测动画完成状态。因为早期不同浏览器有前缀差异，所以最好同时绑定多个事件以兼容更多场景：

$('div').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
  // 这里写动画完成后要执行的逻辑
  console.log('CSS动画已经跑完啦！');
});

• animationend 是标准事件，现代浏览器都支持；
• webkitAnimationEnd 兼容旧版Chrome、Safari等webkit内核浏览器；
• oAnimationEnd 和 MSAnimationEnd 分别兼容旧版Opera和IE浏览器，现在用得比较少，但加上更稳妥。

这个需求实现起来很顺畅，核心思路是：先完成逐字显示的动画，在动画结束的回调里启动5秒定时器就行。给你一个完整的实现示例：

HTML结构 #

<div class="typewriter-text"></div>

简单样式（可选） #

.typewriter-text {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
}

jQuery实现逻辑 #

$(function() {
  const fullText = "这是一段要逐字展示的示例文本~";
  const $textEl = $('.typewriter-text');
  let currentCharIndex = 0;
  
  // 逐字显示的定时器
  const typeInterval = setInterval(() => {
    if (currentCharIndex < fullText.length) {
      // 追加当前字符到容器
      $textEl.append(fullText.charAt(currentCharIndex));
      currentCharIndex++;
    } else {
      // 逐字动画结束，清除定时器
      clearInterval(typeInterval);
      // 启动5秒定时器
      setTimeout(() => {
        console.log("5秒时间到！可以执行后续逻辑啦");
        // 这里替换成你需要的操作，比如弹窗、跳转等
      }, 5000);
    }
  }, 120); // 每个字符间隔120ms，数值越小速度越快
});

你可以根据需求调整逐字的间隔时间（上面的120ms），或者修改定时器到期后的执行逻辑，完全灵活可控。

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