本文介绍了如何通过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 style="--n:${10 * i - 10000}ms;">${c}</span>`), '');
};
const wiggleAll = () => {
document.querySelectorAll('.wiggle').forEach(wiggle);
}
wiggleAll(); // Wiggle all
wiggle('.wiggle-single'); // Wiggle this manuallyCSS 代码:
@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>
代码解释:
- wiggle(elementOrSelector) 函数接受一个元素或选择器作为参数，并对其应用抖动效果。
- wiggleAll() 函数选取所有类名为 wiggle 的元素，并对它们应用 wiggle() 函数。
- CSS 定义了 wave 动画和 .wiggle span 的样式，包括动画延迟和位置。
- 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" style="--n:${10 * i - 10000}ms;">${c}</span>`), '');
};
const wiggleAll = () => {
document.querySelectorAll('.wiggle').forEach(wiggle);
}
wiggleAll(); // Wiggle all
wiggle('.wiggle-single'); // Wiggle this manuallyCSS 代码:
@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>
代码解释:
- wiggle(elementOrSelector) 函数与方案一类似，但现在它为每个 <span> 元素添加了 wiggler 类名。
- wiggleAll() 函数同样选取所有类名为 wiggle 的元素，并应用 wiggle() 函数。
- CSS 定义了 wave 动画和 .wiggler 的样式，包括动画延迟和位置。
- HTML 结构与方案一相同。
注意事项
- 性能优化: 对于大量文本，频繁操作 DOM 可能会影响性能。可以考虑使用 requestAnimationFrame 来优化动画渲染。
- 兼容性: 确保代码在目标浏览器上具有良好的兼容性。
- 动画效果: 可以根据需要调整动画的关键帧、延迟和持续时间，以获得最佳的视觉效果。
总结
通过以上两种方案，我们可以灵活地使用类名而非ID来实现文字抖动动画。方案一通过控制容器元素的类名来决定是否应用动画，而方案二则通过为每个 <span> 元素添加类名来实现更灵活的样式控制。选择哪种方案取决于具体的应用场景和需求。
