如何阻止链接在动画完成前跳转：JavaScript 动画与页面重定向的正确协同

点击带动画的导航链接时，浏览器 会立即跳转，导致动画被中断；需通过 `onclick` 中阻止默认行为，并在动画结束后手动触发跳转。

在 Web 页面中实现“平滑页面切换”动画（如 Logo 位移、菜单收缩）时，一个常见陷阱是：HTML 标签的 href 会无视 JavaScript 动画执行状态，立即触发页面跳转。你的 move() 函数虽已调用 Element.animate()，但该 API 是异步的——它立即返回 Animation 对象，而不会阻塞后续代码或阻止 的默认跳转行为。

✅ 正确解法：拦截跳转 + 动画完成后手动跳转

核心思路是：

• 阻止默认跳转：在 onclick 中调用 e.preventDefault() 或直接 return false；
• 手动控制跳转时机：利用 Animation.onfinish 事件，在动画完全结束后再执行 location.href = url。

✅ 推荐实现（语义清晰、兼容性好）

Portfolio About

function moveAndNavigate(triggerEl) {const targetUrl = triggerEl.dataset.href;   if (!targetUrl) return;    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});    // 同步设置最终样式（避免动画结束瞬间回弹）logo.style.left = "5vw";   logo.style.top = "7.5vh";   menu.style.left = "0vw";   menu.style.top = "5vh";   menu.style.width = "7.5vw";    // 关键：等待所有动画完成后再跳转   Promise.all([logoAnim.finished,     menuAnim.finished]).then(() => {window.location.href = targetUrl;}); }

? 为什么 return false 在 onclick=”move();return false;” 中有效？它等价于 event.preventDefault() + event.stopPropagation()，彻底阻止了 的默认跳转行为，把跳转控制权完全交还给 JS。

⚠️ 注意事项

• ❌ 不要使用 while 循环轮询动画状态（阻塞主线程，导致页面卡死）；
• ❌ 避免在 animate() 后直接写 location.href —— 这仍会立即跳转；
• ✅ 优先使用 Animation.finished（返回 Promise），它是现代标准且精准可靠；
• ✅ 若需兼容旧版浏览器（如 IE），可降级使用 setTimeout + 固定延迟（不推荐，但可行）；
• ✅ Django 模板中保持 {% url %} 的静态解析优势，通过 data-href 传递，既安全又灵活。

✅ 补充：CSS 动画 vs JS animate() 的定位

确保 .logopos 和 .list 的 position: absolute 已启用，否则 left/top 无效；同时建议为动画元素添加 will-change: left, top, width 提升性能：

.logopos, .list {will-change: left, top, width;}

至此，你的页面切换将真正实现「先动画、后跳转」的丝滑体验。

立即学习“Java 免费学习笔记（深入）”；