【解決方法】JS の移行コードの問題

[ad_1]

そのため、CSSトランジションをアニメーション化するためにこのjsを作成しましたが、htmlページごとに1つだけの場合は正常に機能します。しかし、HTMLファイルに複数を追加しようとすると、アニメーション化されるのは1つだけです。私が間違っていることは何ですか？私はまだJavaに慣れていないので、助けていただければ幸いです。私のページに複数のトランジションを入れたいだけです。

ジャバスクリプト

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これは、HTML内で呼び出されたものです

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

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

私が試したこと：

is active クラスを別の呼び出しに追加しようとしましたが、間違っている必要があります。

解決策 1

document.querySelector セレクターに一致する単一の要素を返します。一致するすべての要素を取得する場合は、呼び出す必要があります document.querySelectorAll リストを繰り返し処理します。

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