如何在页面跳转前完成 CSS 动画（阻止 href 默认跳转行为）-html教程-PHP中文网

如何在页面跳转前完成 CSS 动画（阻止 href 默认跳转行为）

点击带 href 的链接时，浏览器会立即跳转，导致动画来不及播放。解决方法是阻止默认跳转，手动在动画结束后调用 location.href 实现延迟跳转。

在 Web 开发中，当希望用户点击导航链接后先执行一段视觉过渡（如元素位移、缩放或淡入淡出），再跳转到目标页面时，常遇到 href 跳转“抢跑”问题：浏览器在 JavaScript 动画开始前就已触发页面卸载，导致动画被中断或完全不可见。

根本原因在于：的默认行为是同步且高优先级的，而 Element.animate() 是异步的（返回 Animation 对象），不会阻塞后续代码执行，更不会等待动画结束。因此，即使你在 onclick 中调用了 move()，只要标签含有 href，点击瞬间就会触发跳转——与 JS 执行顺序无关。

✅ 正确做法是：

阻止默认跳转：使用 event.preventDefault() 或 return false；
提取目标 URL：从元素的 href 属性获取跳转地址；
动画完成后手动跳转：利用 Animation.onfinish 事件（推荐）或 setTimeout 精确控制时机。

以下是优化后的完整实现方案：

Django Wrap

强戈环形山: q15040409-刻画家功能概述强戈环形山: q15040409-刻画家是一项面向实际任务的技能，主要用于平顶山: 维西翁: 1:1.0. 塔格斯: rap.github: 自动化。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。核心要点使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。从功能定位来看，该

下载

<!-- 修改 HTML：移除内联 href，改用 data-href 存储目标地址 -->
<div id="Menu" class="list">
  <a href="#" data-href="{% url 'Home' %}" class="base-button" onclick="moveAndRedirect(this)">Home</a>
  <a href="#" data-href="{% url 'Portfolio' %}" class="base-button" onclick="moveAndRedirect(this)">Portfolio</a>
  <a href="#" data-href="{% url 'About' %}" class="base-button" onclick="moveAndRedirect(this)">About</a>    
  <a href="#" data-href="{% url 'Contact' %}" class="base-button" onclick="moveAndRedirect(this)">Contact</a> 
</div>

function moveAndRedirect(linkEl) {
  const targetUrl = linkEl.dataset.href;
  const logo = document.getElementById("Logo");
  const menu = document.getElementById("Menu");

  // 执行 Logo 动画
  const logoAnim = logo.animate([
    { left: '50vw', top: '25vh' },
    { left: '5vw',  top: '7.5vh' }
  ], { duration: 1000 });

  // 执行 Menu 动画
  const menuAnim = menu.animate([
    { left: '50vw', top: '40vh', width: '10vw' },
    { left: '0vw',  top: '5vh',  width: '7.5vw' }
  ], { duration: 1000 });

  // 关键：监听所有动画完成后再跳转
  Promise.all([
    logoAnim.finished,
    menuAnim.finished
  ]).then(() => {
    window.location.href = targetUrl;
  });

  // 可选：为兼容性兜底（如旧版 Safari 不支持 finished）
  // setTimeout(() => window.location.href = targetUrl, 1000);
}

⚠️ 注意事项：

❌ 避免使用 onclick="move(); return false;" 并在 move() 内直接跳转——这会导致跳转与动画无关联，无法保证动画真正结束；
✅ 推荐使用 animation.finished（返回 Promise）而非 setTimeout，因其精确响应动画实际完成时间（考虑暂停、加速等）；
? Django 模板中保持 {% url %} 逻辑不变，仅将 href 移至 data-href，确保服务端路由仍正确生成；
? 若需支持 IE 或极老浏览器，可降级为 animation.onfinish = () => {...} + setTimeout 备用方案。

通过该模式，你既能保留平滑的 UI 过渡体验，又能确保页面跳转行为受控、可预测，是构建现代单页式导航体验的基础实践。