前端动画实践：从ID到Class，实现可复用文本波动效果-js教程-PHP中文网

前端动画实践：从ID到Class，实现可复用文本波动效果

本教程详细介绍了如何将原先基于ID的文本波动动画重构为基于Class的解决方案。通过JavaScript动态生成带自定义CSS变量的标签，并结合CSS类选择器，实现动画在多个HTML元素上的复用。文章提供了两种实现方式，强调了代码的可扩展性和维护性，是前端动画设计中的一项实用技巧。

引言：从单一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) =>
    // 为每个字符创建一个<span>，并设置动态CSS变量--n作为动画延迟
    (html + `<span style="--n:${10 * index - 10000}ms;">${char}</span>`), '');
};

/**
 * 查找页面上所有带有'wiggle'类的元素，并为它们应用波动动画。
 */
const wiggleAll = () => {
  document.querySelectorAll('.wiggle').forEach(wiggle);
};

// 页面加载后立即执行所有带有'wiggle'类的元素的动画
wiggleAll();

// 也可以手动为特定元素（如带有'wiggle-single'类的元素）应用动画
wiggle('.wiggle-single');

登录后复制

代码解析：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

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'类父元素下的<span>标签 */
.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类即可。

<h1 class="wiggle">这段文字应该波动...</h1>

<h2>...而这段文字不应该波动...</h2>

<h1 class="wiggle">...但这段文字应该波动。</h1>

<h1 class="wiggle-single">手动波动这个...</h1>

登录后复制

效果说明： 通过这种方式，任何带有wiggle类的<h1>标签都会自动应用波动动画。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) =>
    // 为每个字符的<span>标签添加一个独立的'wiggler'类
    (html + `<span class="wiggler" style="--n:${10 * index - 10000}ms;">${char}</span>`), '');
};

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'类的<span>标签 */
.wiggler {
  animation-delay: var(--n);
  animation: wave 2s linear var(--n) infinite forwards running;
  position: relative;
}

登录后复制

代码解析： 选择器从.wiggle span变为.wiggler。这意味着只要一个元素拥有wiggler类，无论其父元素是什么，都会应用动画。

HTML结构

HTML结构与方案一保持不变，仍然通过wiggle类来标识需要处理的容器。

<h1 class="wiggle">这段文字应该波动...</h1>

<h2>...而这段文字不应该波动...</h2>

<h1 class="wiggle">...但这段文字应该波动。</h1>

<h1 class="wiggle-single">手动波动这个...</h1>

登录后复制

效果说明： 此方案提供了更清晰的关注点分离：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类选择器，我们可以轻松地将复杂的文本动画应用到页面上的任意多个元素。方案二通过为生成的添加特定类，进一步解耦了样式与容器，提供了更高的灵活性。掌握这些技术，将有助于你构建更具交互性和可扩展性的前端应用。

以上就是前端动画实践：从ID到Class，实现可复用文本波动效果的详细内容，更多请关注php中文网其它相关文章！