交叉点观察者中有 entry.target.Classname 吗？

Question

I am trying to conditionally trigger animations via intersection observer. I have used document.queryselector.all to call items of a certain class, and then another document.queryselector.all to call items of a different class.

I have two different animations being triggered via intersection observer, but I want them to be triggered conditionally based on their classname. is there a way to do this?

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);
    })

I want to trigger the animation for class.anim based on class name condition being met? Is there such a way?

I am a total beginner BTW. Thanks

Answer 1

You could try this instead:

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