点击带动画的导航链接时，浏览器会立即跳转，导致动画被中断；需通过 `onclick` 中阻止默认行为，并在动画结束后手动触发跳转。
在 Web 页面中实现“平滑页面切换”动画（如 Logo 位移、菜单收缩）时，一个常见陷阱是：HTML <a> 标签的 href 会无视 JavaScript 动画执行状态，立即触发页面跳转。你的 move() 函数虽已调用 Element.animate()，但该 API 是异步的——它立即返回 Animation 对象，而不会阻塞后续代码或阻止 <a> 的默认跳转行为。
✅ 正确解法：拦截跳转 + 动画完成后手动跳转
核心思路是：
- 阻止默认跳转：在 onclick 中调用 e.preventDefault() 或直接 return false；
- 手动控制跳转时机：利用 Animation.onfinish 事件，在动画完全结束后再执行 location.href = url。
✅ 推荐实现（语义清晰、兼容性好）
<!-- 修改 HTML：为每个导航链接绑定 data-href，并移除原始 href -->
<a class="base-button" data-href="{% url 'Portfolio' %}" onclick="moveAndNavigate(this)">Portfolio</a>
<a class="base-button" data-href="{% url 'About' %}" onclick="moveAndNavigate(this)">About</a>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()，彻底阻止了 <a> 的默认跳转行为，把跳转控制权完全交还给 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 提升性能：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
.logopos, .list {
will-change: left, top, width;
}至此，你的页面切换将真正实现「先动画、后跳转」的丝滑体验。
立即学习“Java免费学习笔记（深入）”；
