如何在页面跳转前完成 CSS 动画（阻止 href 立即重定向）

在网页交互场景中，点击链接跳转前播放一段CSS过渡动画是很常见的需求，比如页面切换时的淡出效果、元素滑动效果等。但a标签默认的href属性会立即触发页面重定向，导致动画还没执行完就直接跳转，无法达到预期的视觉效果。要解决这个问题，核心思路是阻止默认的跳转行为，等待动画执行完成后再手动触发跳转。

方案一：阻止默认行为+监听动画结束事件

这种方式是最推荐的，它会在动画完全执行结束后再触发跳转，不会出现动画没播完就跳转的问题。核心步骤是给a标签绑定点击事件，先调用event.preventDefault()阻止默认跳转，然后给需要执行动画的元素添加动画类，监听动画结束事件，在回调中执行跳转。

首先定义CSS动画样式：

/* 定义淡出动画 */
.fade-out {
    animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

然后是HTML结构和JavaScript逻辑：

<a href="https://ipipp.com/target" class="jump-link">点击跳转到目标页面</a>
<div class="content">页面内容区域</div>

<script>
    const jumpLink = document.querySelector('.jump-link');
    const content = document.querySelector('.content');

    jumpLink.addEventListener('click', function(e) {
        // 阻止默认的href跳转行为
        e.preventDefault();
        // 获取目标跳转地址
        const targetUrl = this.href;
        // 给内容区域添加淡出动画类
        content.classList.add('fade-out');
        // 监听动画结束事件
        content.addEventListener('animationend', function handler() {
            // 跳转前移除事件监听，避免重复触发
            content.removeEventListener('animationend', handler);
            // 手动触发页面跳转
            window.location.href = targetUrl;
        });
    });
</script>

方案二：延迟跳转（不推荐）

这种方式是通过setTimeout设置延迟时间，等待动画播放完成后再跳转。缺点是如果动画时长调整，需要同步修改延迟时间，容易出现时间不匹配的问题，而且如果用户设备性能较差，动画播放变慢，还是会出现跳转过早的情况。

代码示例：

<a href="https://ipipp.com/target" class="delay-jump-link">延迟跳转链接</a>

<script>
    const delayLink = document.querySelector('.delay-jump-link');
    delayLink.addEventListener('click', function(e) {
        e.preventDefault();
        const targetUrl = this.href;
        // 添加动画类
        document.body.classList.add('fade-out');
        // 延迟500ms跳转，需要和动画时长一致
        setTimeout(() => {
            window.location.href = targetUrl;
        }, 500);
    });
</script>

两种方案对比

我们可以通过表格对比两种方案的优缺点：

注意事项

• 如果动画是作用在a标签本身，需要注意添加动画类后，不要影响a标签的可点击区域，避免交互问题。
• 如果页面中有多个跳转链接需要添加动画，可以把逻辑封装成通用函数，减少重复代码。
• 动画时长建议控制在1秒以内，避免用户等待时间过长，影响体验。
• 如果跳转的是当前页面的锚点，不需要使用window.location.href，可以改用window.location.hash来设置锚点。

通用封装示例

如果有多个链接需要添加跳转前动画，可以封装一个通用函数：

/**
 * 给指定选择器下的所有跳转链接添加跳转前动画
 * @param {string} linkSelector - 链接选择器
 * @param {string} animateTargetSelector - 执行动画的元素选择器
 * @param {string} animateClass - 动画类名
 */
function addJumpAnimation(linkSelector, animateTargetSelector, animateClass) {
    const links = document.querySelectorAll(linkSelector);
    const animateTarget = document.querySelector(animateTargetSelector);

    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetUrl = this.href;
            animateTarget.classList.add(animateClass);
            // 定义事件处理函数
            function handler() {
                animateTarget.removeEventListener('animationend', handler);
                window.location.href = targetUrl;
            }
            animateTarget.addEventListener('animationend', handler);
        });
    });
}

// 调用示例
addJumpAnimation('.jump-link', '.content', 'fade-out');

CSS_animationhref_redirectpage_transitionevent_preventDefault修改时间：2026-07-16 06:03:24