在交集观察器中是否有 entry.target.Classname?

Question

我正在尝试通过交集观察器有条件地触发动画。我用document.queryselector.all调用某个类的项目，然后用另一个document.queryselector.all调用不同类的项目。

我有两个不同的动画通过交集观察器触发，但我希望它们根据它们的类名有条件地触发。 有没有办法做到这一点？

const Images  = document.querySelectorAll ('.anim',); 
const lines = document.querySelectorAll ('.lines');
let callback = (entries, observer)=> {
entries.forEach(entry => {
if(entry.target.className === '.anim' && entry.intersectionRatio > 0){
console.log (entries);
entry.target.style.animation = `pcb_grp_anim 1s ${entry.target.dataset.delay} forwards ease-in-out`
}
else {
entry.target.style.animation = 'none';
}

})
}
let observer = new IntersectionObserver (callback);

Images.forEach (image => {
observer.observe(image);
})

我想根据满足的类名条件触发类 .anim 的动画？有这样的办法吗？

顺便说一句，我是一个完全的初学者。 谢谢

Answer 1

你可以试试这个：

if(entry.target.classList.contains('anim') && entry.intersectionRatio > 0)