当一个元素出现在视口时添加css样式
假设只需要当元素出现在视口,无论出现多少的话,使用 IntersectionObserver
这个API即可满足需求,代码示例如下:
// 创建一个 IntersectionObserver 实例
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const isleft = Object.values(entry.target.classList).includes('platform_left')
if (entry.intersectionRatio > 0) {
entry.target.classList.add(isleft ? 'animate__slideInLeft' : 'animate__slideInRight');
}
});
});
// 获取所有需要添加样式的元素
const leftele = document.querySelectorAll('.platform_left');
const rightele = document.querySelectorAll('.platform_right');
// 遍历元素并开始观察
leftele.forEach(element => {
observer.observe(element);
});
rightele.forEach(element => {
observer.observe(element);
});
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。