CSS/JS页面过渡问题：多过渡仅生效一个的排查求助

问题根源 #

1. 元素获取局限：document.querySelector('.transition')仅会返回DOM中第一个匹配.transition类的元素，页面里的第二个.transition-clean元素完全未被JS控制，自然无法触发过渡动画。
2. 事件绑定范围冗余：给所有<a>标签绑定点击事件，实际仅需给带.transition类的过渡触发链接绑定即可。

修复方案 #

1. 修改JavaScript代码 #

获取所有过渡元素，分别处理初始状态与点击事件：

window.onload = () => {
    // 获取所有带.transition类的元素
    const transitionElements = document.querySelectorAll('.transition');
    // 仅给带.transition类的a标签绑定事件
    const transitionAnchors = document.querySelectorAll('a.transition');

    // 页面加载完成后，移除所有过渡元素的is-active类
    setTimeout(() => {
        transitionElements.forEach(el => el.classList.remove('is-active'));
    }, 500);

    // 为每个过渡链接绑定点击事件
    transitionAnchors.forEach(anchor => {
        anchor.addEventListener('click', e => {
            e.preventDefault();
            const targetUrl = anchor.href;

            // 方案A：仅触发当前点击链接对应的过渡
            anchor.classList.add('is-active');

            // 方案B：点击任意链接时同时触发所有过渡动画（按需选择）
            // transitionElements.forEach(el => el.classList.add('is-active'));

            setTimeout(() => {
                window.location.href = targetUrl;
            }, 500);
        });
    });
};

2. 可选调整HTML结构 #

原HTML中两个过渡链接默认带有is-active类，JS会在500ms后移除该类。若希望初始状态不显示过渡元素，可去掉默认的is-active类，完全由JS控制初始显示：

<body>
    <div>
        <a href="contact.html" class="transition transition-catching"></a>
        <a href="contact.html" class="transition transition-clean"></a>  
    </div>
</body>

3. CSS无需修改 #

你的CSS过渡逻辑正常，只要JS正确给对应元素添加/移除is-active类，过渡动画即可正常触发。

关键说明 #

• 若需点击对应链接触发对应过渡，选择方案A；
• 若需点击任意链接同时触发两个过渡，选择方案B；
• querySelectorAll返回元素集合，必须通过forEach循环遍历处理每个元素，无法直接调用类操作方法。

内容的提问来源于stack exchange，提问作者egg_it