引言：从单一ID到多元素Class的动画需求
在网页设计中，为文本添加动态效果，如波动动画，可以显著提升用户体验。然而，当动画最初设计为基于html元素的id属性时，会面临一个核心问题：id在html文档中必须是唯一的。这意味着一个id-based的动画只能应用于页面上的一个元素。当需要将相同的动画效果应用到多个标题、段落或其他文本元素时，这种限制就变得不可接受。
为了实现动画的可复用性和可扩展性，我们需要将动画逻辑从单一的id选择器转向更具通用性的class选择器。这将允许我们通过简单地为任意HTML元素添加一个特定的类名，就能使其拥有相同的动画效果。
核心原理：JavaScript动态结构与CSS类选择器
实现文本波动动画的关键在于将每个字符包裹在一个独立的标签中，并通过CSS变量为每个设置不同的动画延迟。
- JavaScript动态生成结构： JavaScript负责获取目标文本内容，将其拆分为单个字符，然后为每个字符创建一个元素。在创建时，会为其内联样式设置一个CSS变量（例如--n），该变量的值根据字符在文本中的位置动态计算，从而实现错开的动画延迟。
- CSS类选择器与变量应用： CSS定义了实际的动画关键帧（@keyframes）以及如何将动画应用于这些元素。通过使用类选择器（例如.wiggle span），我们可以确保动画只作用于具有特定父类下的元素。同时，CSS会利用JavaScript设置的--n变量来控制动画的animation-delay属性，实现逐字波动的效果。
方案一：集成式Class控制
此方案将JavaScript逻辑与CSS类紧密结合，通过一个主类来标识需要动画的容器。
JavaScript实现
核心的wiggle函数被设计为可以处理单个元素，无论是通过选择器字符串还是直接传入DOM元素。wiggleAll函数则负责查找所有带有特定类名的元素并应用动画。
立即学习“前端免费学习笔记（深入）”；
/**
* 为指定元素或选择器匹配的元素应用文本波动动画。
* @param {HTMLElement|string} elementOrSelector - DOM元素或CSS选择器字符串。
*/
const wiggle = (elementOrSelector) => {
// 根据输入类型获取DOM元素
const element = typeof elementOrSelector === 'string'
? document.querySelector(elementOrSelector)
: elementOrSelector;
// 如果元素不存在，则提前返回
if (!element) return;
// 确保元素具有'wiggle'类。这允许函数在必要时添加类。
// 实际应用中，通常HTML已包含此class。
if (!element.classList.contains('wiggle')) {
element.classList.add('wiggle');
}
// 获取元素的纯文本内容
const text = element.textContent;
// 清空原始内容
element.textContent = '';
// 将文本拆分成字符数组，并使用reduce方法构建新的innerHTML
element.innerHTML = text.split('').reduce((html, char, index) =>
// 为每个字符创建一个，并设置动态CSS变量--n作为动画延迟
(html + `${char}`), '');
};
/**
* 查找页面上所有带有'wiggle'类的元素，并为它们应用波动动画。
*/
const wiggleAll = () => {
document.querySelectorAll('.wiggle').forEach(wiggle);
};
// 页面加载后立即执行所有带有'wiggle'类的元素的动画
wiggleAll();
// 也可以手动为特定元素（如带有'wiggle-single'类的元素）应用动画
wiggle('.wiggle-single');代码解析：
- wiggle函数：接收一个CSS选择器字符串或DOM元素。它首先确保目标元素存在，并可选择性地为其添加wiggle类。然后，它获取元素的纯文本内容，清空原始内容，并将每个字符包裹在一个中，同时通过--n变量设置基于索引的动画延迟。reduce方法在此处用于高效地构建HTML字符串。
- wiggleAll函数：使用document.querySelectorAll('.wiggle')获取所有带有wiggle类的元素（返回一个NodeList），然后通过forEach循环，对每个元素调用wiggle函数。
CSS样式
CSS部分定义了动画的关键帧和如何将动画样式应用于JavaScript生成的元素。
/* 定义文本波动动画的关键帧 */
@keyframes wave {
0% { top: 0px; }
25% { top: -4px; } /* 向上移动 */
50% { top: 0px; }
75% { top: 4px; } /* 向下移动 */
100% { top: 0px; }
}
/* 将动画应用于所有具有'wiggle'类父元素下的标签 */
.wiggle span {
animation-delay: var(--n); /* 使用JS设置的变量作为延迟 */
animation: wave 2s linear var(--n) infinite forwards running;
position: relative; /* 允许top属性生效 */
}代码解析：
- @keyframes wave：定义了一个名为wave的动画，使其在0%、50%、100%时回到原始位置，在25%和75%时分别向上和向下移动4px。
- .wiggle span：这是一个后代选择器，它确保只有在父元素具有wiggle类时，其内部的标签才会被应用动画样式。animation-delay: var(--n);是关键，它利用JavaScript动态生成的--n变量来控制每个字符的动画启动时间。position: relative;是使top属性生效的必要条件。
HTML结构
只需为需要动画的HTML元素添加wiggle类即可。
这段文字应该波动...
...而这段文字不应该波动...
...但这段文字应该波动。
手动波动这个...
效果说明： 通过这种方式，任何带有wiggle类的
标签都会自动应用波动动画。wiggle-single类则展示了如何通过选择器手动触发单个元素的动画。方案二：解耦元素的Class
为了进一步提高灵活性和解耦性，我们可以选择为JavaScript生成的每个元素添加一个特定的类，而不是依赖于父容器的类。这样，CSS样式可以直接针对这个上的类，而不是通过后代选择器。
JavaScript实现
wiggle函数的主要变化是在生成时，为其添加一个wiggler类。
const wiggle = (elementOrSelector) => {
const element = typeof elementOrSelector === 'string'
? document.querySelector(elementOrSelector)
: elementOrSelector;
if (!element) return;
const text = element.textContent;
element.textContent = '';
element.innerHTML = text.split('').reduce((html, char, index) =>
// 为每个字符的标签添加一个独立的'wiggler'类
(html + `${char}`), '');
};
const wiggleAll = () => {
document.querySelectorAll('.wiggle').forEach(wiggle);
};
wiggleAll();
wiggle('.wiggle-single');代码解析： 与方案一相比，JavaScript代码在标签中额外添加了class="wiggler"。这使得动画样式可以直接绑定到这个类上。
CSS样式
CSS选择器现在直接针对wiggler类。
@keyframes wave {
0% { top: 0px; }
25% { top: -4px; }
50% { top: 0px; }
75% { top: 4px; }
100% { top: 0px; }
}
/* 将动画直接应用于所有具有'wiggler'类的标签 */
.wiggler {
animation-delay: var(--n);
animation: wave 2s linear var(--n) infinite forwards running;
position: relative;
}代码解析： 选择器从.wiggle span变为.wiggler。这意味着只要一个元素拥有wiggler类，无论其父元素是什么，都会应用动画。
HTML结构
HTML结构与方案一保持不变，仍然通过wiggle类来标识需要处理的容器。
这段文字应该波动...
...而这段文字不应该波动...
...但这段文字应该波动。
手动波动这个...
效果说明： 此方案提供了更清晰的关注点分离：wiggle类标识了需要被JavaScript处理的容器，而wiggler类则直接控制了动画的视觉表现。这使得未来如果需要调整动画样式，可以直接修改.wiggler的CSS规则，而无需考虑其父容器的类名。
最佳实践与注意事项
- DOM操作优化： 尽管reduce方法在构建HTML字符串方面效率较高，但对于非常长的文本或大量元素，频繁的DOM操作仍可能影响性能。在极端情况下，可以考虑使用DocumentFragment或虚拟DOM技术。
- CSS变量的优势： var(--n)的使用极大地增强了动画的灵活性和可配置性。你可以根据需要调整--n的计算方式，实现不同的动画效果。
- 可访问性（Accessibility）： 动画虽然能增加视觉吸引力，但也可能对某些用户（如患有前庭障碍或认知障碍的用户）造成不适。考虑提供一个选项来禁用动画，或者使用prefers-reduced-motion媒体查询来尊重用户的系统设置。
- 语义化HTML： 尽量保持HTML结构的语义化。标签用于包裹单个字符是合理的，因为它是一个内联通用容器。
- 动态内容处理： 如果页面内容是动态加载的，请确保在内容加载完成后再次调用wiggleAll()或wiggle()函数，以确保新元素也能应用动画。
总结
从ID-based动画到Class-based动画的转变是前端开发中实现代码复用和可维护性的一个典型案例。通过JavaScript动态生成带有自定义CSS变量的元素，并结合灵活的CSS类选择器，我们可以轻松地将复杂的文本动画应用到页面上的任意多个元素。方案二通过为生成的添加特定类，进一步解耦了样式与容器，提供了更高的灵活性。掌握这些技术，将有助于你构建更具交互性和可扩展性的前端应用。
