文本动画的类选择器应用与优化

<h1 id="wiggle">This text should wiggle...</h1>

function wiggle(){
  var parent = document.getElementById("wiggle");
  // ... 动画逻辑 ...
}
wiggle();

#wiggle span {
  /* ... 动画样式 ... */
}

/**
 * 为指定元素或通过选择器获取的元素应用波浪动画效果。
 * @param {HTMLElement|string} elementOrSelector - DOM元素或CSS选择器字符串。
 */
const wiggle = (elementOrSelector) => {
  // 根据输入类型获取DOM元素
  const element = typeof elementOrSelector === 'string'
    ? document.querySelector(elementOrSelector) // 如果是字符串，使用querySelector获取第一个匹配元素
    : elementOrSelector; // 否则直接使用传入的元素

  // 确保元素存在且不重复添加'wiggle'类（可选，如果逻辑上需要控制）
  if (!element) {
    console.warn('Wiggle target element not found:', elementOrSelector);
    return;
  }
  if (!element.classList.contains('wiggle')) {
    element.classList.add('wiggle'); // 确保元素有'wiggle'类，便于CSS选择
  }

  const text = element.textContent; // 获取原始文本内容
  element.textContent = ''; // 清空元素内容

  // 将文本拆分成字符，并为每个字符创建带动画延迟的<span>
  element.innerHTML = text.split('').reduce((html, char, i) =>
    (html + `<span style="--n:${10 * i}ms;">${char}</span>`), '');
    // 注意：原始答案中的10 * i - 10000ms 可能导致初始负延迟，
    // 这里简化为 10 * i ms，确保延迟从0开始递增。
};

/**
 * 遍历所有带有'wiggle'类的元素并应用动画。
 */
const wiggleAll = () => {
  // 使用querySelectorAll获取所有带有'wiggle'类的元素
  document.querySelectorAll('.wiggle').forEach(wiggle);
};

// 页面加载完成后执行动画
document.addEventListener('DOMContentLoaded', () => {
  wiggleAll(); // 自动为所有.wiggle元素应用动画

  // 如果需要手动为特定元素应用动画（例如，动态添加的元素）
  // wiggle('.wiggle-single');
});

@keyframes wave {
  0%   { top:  0px; }
  25%  { top: -4px; }
  50%  { top:  0px; }
  75%  { top:  4px; }
  100% { top:  0px; }
}

/* 针对所有在.wiggle元素内部的<span>应用动画 */
.wiggle span {
  animation-delay: var(--n); /* 使用JS设置的自定义延迟 */
  animation: wave 2s linear var(--n) infinite forwards running;
  position: relative; /* 使top属性生效 */
  display: inline-block; /* 确保span可以独立定位和动画 */
}

<h1 class="wiggle">第一个会抖动的标题</h1>
<p>这是一个不会抖动的普通段落。</p>
<h2 class="wiggle">第二个会抖动的标题</h2>
<div class="wiggle">
  <p>这个div里的文本也会抖动。</p>
</div>
<h3 class="wiggle-single">这是一个可以手动触发的抖动元素。</h3>

const wiggle = (elementOrSelector) => {
  const element = typeof elementOrSelector === 'string'
    ? document.querySelector(elementOrSelector)
    : elementOrSelector;

  if (!element) {
    console.warn('Wiggle target element not found:', elementOrSelector);
    return;
  }

  const text = element.textContent;
  element.textContent = '';
  // 关键改变：为生成的span添加'wiggler'类
  element.innerHTML = text.split('').reduce((html, char, i) =>
    (html + `<span class="wiggler" style="--n:${10 * i}ms;">${char}</span>`), '');
};

const wiggleAll = () => {
  document.querySelectorAll('.wiggle').forEach(wiggle);
};

document.addEventListener('DOMContentLoaded', () => {
  wiggleAll();
  // wiggle('.wiggle-single'); // 同样支持手动触发
});

@keyframes wave {
  0%   { top:  0px; }
  25%  { top: -4px; }
  50%  { top:  0px; }
  75%  { top:  4px; }
  100% { top:  0px; }
}

/* 直接针对带有'wiggler'类的<span>应用动画 */
.wiggler {
  animation-delay: var(--n);
  animation: wave 2s linear var(--n) infinite forwards running;
  position: relative;
  display: inline-block;
}

<h1 class="wiggle">第一个会抖动的标题</h1>
<p>这是一个不会抖动的普通段落。</p>
<h2 class="wiggle">第二个会抖动的标题</h2>
<div class="wiggle">
  <p>这个div里的文本也会抖动。</p>
</div>
<h3 class="wiggle-single">这是一个可以手动触发的抖动元素。</h3>