javascript - 交叉点观察者中有 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 的动画？有没有这样的方法？

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

标签： javascriptfrontendintersection-observer

Answer 1

你可以试试这个：

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