页面跳转前完成CSS动画的实现方法

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《页面跳转前完成 CSS 动画的实现方法》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

点击链接时，浏览器默认会立即触发跳转，导致动画来不及播放。解决方法是拦截默认行为，在动画结束后手动执行重定向，确保视觉过渡流畅完成。

在 Web 开发中，为提升用户体验，常需在页面跳转前添加平滑的 CSS 动画（如 Logo 缩放、菜单位移等）。但直接在 标签中使用 href 属性时，浏览器会在 onclick 函数执行的同时或之前就启动导航，导致 animate() 这类异步动画被中断或完全跳过。

根本原因在于：href 的跳转是同步且高优先级的 DOM 行为，而 Element.animate() 返回的是一个 Animation 对象，其播放是异步的——它不会阻塞主线程，也不会等待动画结束才继续执行后续 JS 逻辑（包括跳转）。

✅ 正确解法：阻止默认跳转 → 执行动画 → 动画完成后再手动跳转

以下是推荐实现方式（基于现代浏览器兼容性，无需 polyfill）：

✅ 推荐方案：使用 animation.onfinish + e.preventDefault()

<a href="{% url 'Portfolio' %}" class="base-button" onclick="move(event, this)">Portfolio</a>

function move(e, linkElement) {
  e.preventDefault(); // 关键：阻止默认跳转

  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 = linkElement.href; // 安全跳转
  });
}

? 补充说明与注意事项

• 不要用 return false 替代 e.preventDefault()：虽然 onclick="move(); return false" 能阻止跳转，但它会同时阻止事件冒泡且语义模糊；e.preventDefault() 更精准、可维护性更强。
• 避免 setTimeout 硬编码延迟：如 setTimeout(() => location.href = ..., 1000) 不可靠——若动画被用户系统性能影响或 CSS animation-duration 变更，易出现跳转早于动画结束的问题。
• .finished 是 Promise：Animation.finished 返回一个在动画自然结束（含完成、取消、填充模式生效）时 resolve 的 Promise，比轮询 animation.playState 更优雅。
• 兼容性提示：Animation.finished 在 Chrome 46+、Firefox 48+、Edge 79+、Safari 16.4+ 中原生支持；如需支持旧版 Safari，可降级使用 animation.onfinish 事件回调（注意：该事件不触发于被 cancel() 的动画）。

✅ 最终效果

用户点击「Portfolio」链接后：

1. 页面不立即跳转；
2. Logo 与菜单同步执行 1 秒位移缩放动画；
3. 动画完全结束后，自动跳转至 {% url 'Portfolio' %} 对应路由；
4. 整个过程无闪烁、无回弹、过渡自然。

此方案兼顾语义清晰性、可维护性与跨浏览器稳定性，是实现“带动画的 SPA 式导航”的标准实践之一。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《页面跳转前完成CSS动画的实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。