什么是 Intersection Observer API？
Intersection Observer API 是一种浏览器原生的 API，允许开发者异步监测一个元素与其祖先元素或视口的交叉状态。与传统的 scroll 事件相比，Intersection Observer 提供了更高效的性能，避免了频繁的计算和重绘。
功能概述
我们将实现以下功能：
- 监测页面元素是否进入视口。
- 当元素进入视口时，自动添加动画类名。
- 支持 Animate.css 动画库的各种动画效果。
- 提供两种动画模式：只触发一次和每次进入视口都触发。
实现步骤
1. 引入 Animate.css
首先，我们需要引入 Animate.css 动画库，以便使用其提供的动画效果。在 HTML 文件的 部分添加以下链接：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
2. 创建 Intersection Observer
接下来，我们创建一个 Intersection Observer 实例，用于监测元素的可见性：
entries.forEach(entry => {
if (entry.isIntersecting) {
const animation = entry.target.dataset.animation;
if (animation) {
entry.target.classList.add('animate__animated', `animate__${animation}`);
observer.unobserve(entry.target); // 只触发一次
}
}
});
}, {
threshold: 0.1 // 10% 进入视口时触发
});
3. 观察元素
在 DOMContentLoaded 事件中，我们获取所有带有 data-animation 属性的元素，并开始观察它们：
document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('[data-animation]');
elements.forEach(element => {
observer.observe(element);
});
});
4. 支持重复触发的动画
如果希望某些元素每次进入视口时都触发动画，可以创建另一个观察者：
const observerAny = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const animation = entry.target.dataset.animation;
if (entry.isIntersecting) {
entry.target.classList.add('animate__animated', `animate__${animation}`);
} else {
entry.target.classList.remove('animate__animated', `animate__${animation}`);
}
});
});
// 观察带有 data-animation-any 属性的元素
document.addEventListener('DOMContentLoaded', () => {
const elementsAny = document.querySelectorAll('[data-animation-any]');
elementsAny.forEach(element => {
observerAny.observe(element);
});
});
5. HTML 示例
<div data-animation="fadeIn">只触发一次的动画</div>
<div data-animation-any="bounceIn">每次进入视口都触发的动画</div>
总结
通过使用 Intersection Observer API，我们可以轻松实现滚动触发的动画效果。与传统的 scroll 事件相比，这种方法不仅性能更优，还能提供更好的用户体验。无论是为产品展示、页面内容还是其他元素添加动画，Intersection Observer 都是一个强大的工具。希望这篇文章能帮助你在网页开发中更好地使用动画效果，提升用户体验！
