如何实现点击跳转链接前触发CSS过渡动画？

你的问题在于用CSS的:active伪类无法实现点击后等待动画完成再跳转的需求——:active仅在鼠标按下链接的瞬间生效，松开鼠标后状态立刻消失，再加上你原动画设置了10秒延迟，根本来不及触发完整动画。要实现点击链接先执行过渡再跳转，必须结合JavaScript控制流程，具体步骤如下：

1. 调整CSS，新增无延迟的动画类 #

保留原有的自动触发动画（带10秒延迟），新增针对点击场景的无延迟动画类，确保点击后动画立即执行：

/* 自动触发：10秒后执行动画 */
.transition{
    animation: transitionIn 5s 10s;
}
.transition1{
    animation: transitionOut 5s 10s;
}

/* 点击触发：无延迟，立即执行 */
.transition-immediate{
    animation: transitionIn 5s;
}
.transition1-immediate{
    animation: transitionOut 5s;
}

/* 以下为原关键帧动画，仅修正一处语法错误（translateY(-10)补全单位px） */
@keyframes transitionIn{
    from{
        background-color: #106560;
        opacity:1;
        transform: translateX(100%);
    }
    to{
        background-color: #ffffff;
        opacity:1;
        transform: translateX(0);
    }
}

@keyframes transitionOut{
    from{
        background-color: white;
        opacity:1;
        transform: translateX(100%);
    }
    to{
        background-color: #106560;
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from{
      opacity: 0;
    }
    to{
      opacity:1;
      transform: translateY(0);
    }
}

@keyframes fadeInOut{
    from{
      opacity:1;
    }
    to{
      opacity:0;
      transform:translateY(-10px);
    }
}

2. 用JavaScript控制点击跳转流程 #

给需要触发过渡跳转的链接标记专属类，通过JS监听点击事件，阻止默认跳转、添加动画类，等待动画结束后再完成页面跳转：

JavaScript代码 #

// 选中所有需要过渡跳转的链接（标记了.js-transition-link类）
const transitionLinks = document.querySelectorAll('.js-transition-link');

transitionLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        // 阻止默认跳转行为
        e.preventDefault();
        const targetUrl = this.href;
        // 从链接的data属性获取要触发的动画类，默认用transition-immediate
        const transitionClass = this.dataset.transition || 'transition-immediate';
        
        // 给body添加动画类，触发过渡
        document.body.classList.add(transitionClass);
        
        // 监听动画结束事件，执行跳转
        function handleAnimationEnd(e) {
            // 仅处理目标动画的结束事件，避免其他动画干扰
            if (e.animationName === 'transitionIn' || e.animationName === 'transitionOut') {
                window.location.href = targetUrl;
                // 清理事件监听和动画类，防止后续异常
                document.body.removeEventListener('animationend', handleAnimationEnd);
                document.body.classList.remove(transitionClass);
            }
        }
        
        document.body.addEventListener('animationend', handleAnimationEnd);
        
        // 保险机制：设置超时跳转，防止动画end事件未触发
        setTimeout(() => {
            window.location.href = targetUrl;
            document.body.removeEventListener('animationend', handleAnimationEnd);
            document.body.classList.remove(transitionClass);
        }, 5000); // 时长与动画时长保持一致（5秒）
    });
});

HTML链接写法 #

给需要过渡跳转的链接添加专属类和data-transition属性，指定要触发的动画类：

<!-- 触发transitionIn动画后跳转 -->
<a href="/your-next-page" class="js-transition-link" data-transition="transition-immediate">跳转到下一页</a>

<!-- 触发transitionOut动画后跳转 -->
<a href="/another-page" class="js-transition-link" data-transition="transition1-immediate">跳转到另一页</a>

关键说明 #

• CSS无法单独实现“等待动画完成再跳转”的逻辑，必须依赖JS的事件监听和流程控制。
• 新增无延迟的动画类是为了区分自动触发和点击触发的场景，避免点击后还要等10秒才开始动画。
• 加入超时跳转是为了兼容部分浏览器或异常情况，确保即使动画end事件未触发，页面也能正常跳转。

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