Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
so i have this js written to help animate my CSS transitions and it works fine when its just one per html page. But when i try to add more then one to any html file it only animates one. What I'm doing wrong? I'm still new to java any help is appreciated. Just wanna have more then one transition on my page.

JAVASCRIPT

window.onload = () => {
    const transition_el = document.querySelector('.transition');
    const anchors = document.querySelectorAll('a');

    setTimeout( () => {
        transition_el.classList.remove('is-active');

    }, 500);

    for (let i = 0; i < anchors.length; i++) {
        const anchor = anchors[i];

        anchor.addEventListener('click', e => {
            e.preventDefault();
            let target = e.target.href;

            transition_el.classList.add('is-active');

            setTimeout(() => {
                window.location.href = target;

            }, 500)
        });

    }
}


CSS

/*catching*/

.transition-catching {
    content: url(/HP/Catching.svg);
    position:absolute; 
    width: 27%; 
    margin-top:19.3%; 
    margin-left:20%;
    z-index: 101;
    transition: 0.5s ease-out;
}

.transition-catching.is-active {
    margin-left: -500px;
}

/*clean*/

.transition-clean {
    content: url(/HPA/Clean.svg);
    position:absolute; 
    width: 81%;
    margin-top: 30%;
    margin-left: -20%;
    z-index: 101;
    transition: 0.5s ease-out;
}

.transition-clean.is-active {
    margin-left: 40px;
}


HTML this is what I have it called out within my html

<a href="contact.html" class="transition transition-catching is-active"></a>

      <a href="contact.html" class="transition transition-clean is-active"></a>


What I have tried:

I have tried adding the is active class to another call out but must of done it wrong.
Posted
Updated 21-Nov-22 0:44am
Comments
Richard Deeming 21-Nov-22 6:37am    
"... still new to java ..."
NB: Despite the similar names, Javascript and Java are two completely different languages.

1 solution

document.querySelector returns a single element which matches the selector. If you want to get all matching elements, you need to call document.querySelectorAll and iterate over the list.
JavaScript
window.onload = () => {
    setTimeout(() => document.querySelectorAll('.transition.is-active').forEach(el => el.classList.remove('is-active')), 500);
    
    document.querySelectorAll('a.transition').forEach(anchor => anchor.addEventListener('click', e => {
        e.preventDefault();
        e.target.classList.add('is-active');
        
        const target = e.target.href;
        setTimeout(() => window.location.href = target, 500);
    }));
};
Document.querySelector() - Web APIs | MDN[^]
Document.querySelectorAll() - Web APIs | MDN[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900