如何使用类名而非ID在网页上运行文字抖动动画

本文介绍了如何通过JavaScript和CSS实现文字抖动动画，并将其应用于多个具有相同类名的元素，而不是单个ID。我们将探讨如何使用querySelectorAll方法选取所有具有指定类名的元素，并使用JavaScript动态地为每个字符创建带有动画延迟的<span>标签，从而实现统一的抖动效果。同时，我们还会提供两种不同的实现方案，以满足不同的需求。

使用类名实现文字抖动动画

最初的实现方案是针对单个ID设计的，现在我们需要将其扩展到可以应用于多个类名相同的元素。核心在于使用document.querySelectorAll来选取所有需要添加动画的元素。

方案一：通过添加类名控制动画

此方案的关键在于通过JavaScript控制元素的类名，从而决定是否应用抖动动画。

JavaScript 代码:

const wiggle = (elementOrSelector) => {
const element = typeof elementOrSelector === 'string'
? document.querySelector(elementOrSelector)
: elementOrSelector;
if (!element.classList.contains('wiggle')) {
element.classList.add('wiggle'); // Or control with a data attribute
}
const text = element.textContent;
element.textContent = '';
element.innerHTML = text.split('').reduce((html, c, i) =>
(html + `<span>${c}</span>`), '');
};
const wiggleAll = () => {
document.querySelectorAll('.wiggle').forEach(wiggle);
}
wiggleAll(); // Wiggle all
wiggle('.wiggle-single'); // Wiggle this manually

CSS 代码:

@keyframes wave {
0%   { top:  0px; }
25%  { top: -4px; }
50%  { top:  0px; }
75%  { top:  4px; }
100% { top:  0px; }
}
.wiggle span {
animation-delay: var(--n);
animation: wave 2s linear var(--n) infinite forwards running;
position: relative;
}

HTML 代码:

<h1 class="wiggle">This text should wiggle...</h1>
<h2>...while this text should not...</h2>
<h1 class="wiggle">...but this should.</h1>
<h1 class="wiggle-single">Manually wiggle...</h1>

代码解释:

1. wiggle(elementOrSelector) 函数接受一个元素或选择器作为参数，并对其应用抖动效果。
2. wiggleAll() 函数选取所有类名为 wiggle 的元素，并对它们应用 wiggle() 函数。
3. CSS 定义了 wave 动画和 .wiggle span 的样式，包括动画延迟和位置。
4. HTML 中，类名为 wiggle 的 <h1> 元素将应用抖动动画。

方案二：通过为span添加类名控制动画

此方案解耦了span元素与其容器之间的关系，通过为每个span元素添加一个特定的类名，使得CSS规则更加灵活。

JavaScript 代码:

const wiggle = (elementOrSelector) => {
const element = typeof elementOrSelector === 'string'
? document.querySelector(elementOrSelector)
: elementOrSelector;
const text = element.textContent;
element.textContent = '';
element.innerHTML = text.split('').reduce((html, c, i) =>
(html + `<span class="wiggler">${c}</span>`), '');
};
const wiggleAll = () => {
document.querySelectorAll('.wiggle').forEach(wiggle);
}
wiggleAll(); // Wiggle all
wiggle('.wiggle-single'); // Wiggle this manually

CSS 代码:

@keyframes wave {
0%   { top:  0px; }
25%  { top: -4px; }
50%  { top:  0px; }
75%  { top:  4px; }
100% { top:  0px; }
}
.wiggler {
animation-delay: var(--n);
animation: wave 2s linear var(--n) infinite forwards running;
position: relative;
}

HTML 代码:

<h1 class="wiggle">This text should wiggle...</h1>
<h2>...while this text should not...</h2>
<h1 class="wiggle">...but this should.</h1>
<h1 class="wiggle-single">Manually wiggle...</h1>

代码解释:

1. wiggle(elementOrSelector) 函数与方案一类似，但现在它为每个 <span> 元素添加了 wiggler 类名。
2. wiggleAll() 函数同样选取所有类名为 wiggle 的元素，并应用 wiggle() 函数。
3. CSS 定义了 wave 动画和 .wiggler 的样式，包括动画延迟和位置。
4. HTML 结构与方案一相同。

注意事项

• 性能优化: 对于大量文本，频繁操作 DOM 可能会影响性能。可以考虑使用 requestAnimationFrame 来优化动画渲染。
• 兼容性: 确保代码在目标浏览器上具有良好的兼容性。
• 动画效果: 可以根据需要调整动画的关键帧、延迟和持续时间，以获得最佳的视觉效果。

总结

通过以上两种方案，我们可以灵活地使用类名而非ID来实现文字抖动动画。方案一通过控制容器元素的类名来决定是否应用动画，而方案二则通过为每个 <span> 元素添加类名来实现更灵活的样式控制。选择哪种方案取决于具体的应用场景和需求。