如何监听AOS动态添加的aos-animate类以触发h2逐字变色自定义动画

你的代码无法触发自定义动画的核心原因是：初始化执行遍历逻辑时，AOS还未给对应元素添加aos-animate类，选择器匹配不到任何元素，因此定时加类的逻辑完全没有执行。

首选方案：使用AOS内置事件监听 #

AOS在元素触发入场动画（和aos-animate类添加时机完全同步）时会自动派发aos:in事件，直接监听该事件即可，无需额外监听DOM属性变化：

// 初始化阶段就把h2内容拆分为单个字符的span，无需等AOS触发
$('h2').html(function(i, html) {
  var chars = $.trim(html).split("");
  return '<span>' + chars.join('</span><span>') + '</span>';
});

// 全局监听AOS入场事件
document.addEventListener('aos:in', ({ detail }) => {
  // detail为当前触发动画的AOS元素，查找其内部的h2 span执行逐字动画
  $(detail).find('h2 span').each(function(i) {
    const row = $(this);
    setTimeout(() => {
      row.addClass('anihead');
    }, 40 * i);
  });
});

默认配置下AOS的事件监听是开启的，不需要修改AOS初始化参数即可生效。

备选方案：通用动态类名监听 #

如果需要不依赖AOS的内置能力，监听任意第三方脚本动态添加的类名，可以使用MutationObserver接口监听DOM属性变化：

// 替换为你需要监听的AOS元素选择器，比如给对应元素加自定义类.aos-watch-target
const targetNode = document.querySelector('.aos-watch-target');
const observer = new MutationObserver((mutationsList) => {
  for(const mutation of mutationsList) {
    // 检测class属性变化时是否新增了aos-animate类
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      if(mutation.target.classList.contains('aos-animate')) {
        // 触发逐字动画
        $(mutation.target).find('h2 span').each(function(i) {
          const row = $(this);
          setTimeout(() => {
            row.addClass('anihead');
          }, 40 * i);
        });
        // 动画触发后停止监听，避免重复执行
        observer.disconnect();
      }
    }
  }
});

// 启动监听，仅监听class属性变化
observer.observe(targetNode, { attributes: true, attributeFilter: ['class'] });

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