点击链接跳转未等待动画执行完成问题求助

核心问题原因 #

浏览器默认的链接跳转是同步触发的，会立即终止当前页面的所有JS执行，导致动画还没播放完就跳转。你之前用e.preventDefault()是对的，但缺少了动画完成后手动触发跳转的逻辑；而while循环等待的方式本身就不符合JS异步执行的特性，所以无效。

解决方案代码实现 #

1. 修改HTML（统一绑定事件）

给所有需要触发动画的链接添加事件处理函数，传递事件对象：

<div id='Logo' class="logopos">
  <a href="{% url 'Home' %}" onclick="handleNavigation(event)">
    <img class="image" src="{% static 'assets/Icon.png'%}" alt="Logo"/>
  </a>
</div>
<div id="Menu" class="list">
  <a href="{% url 'Home' %}" class="base-button" onclick="handleNavigation(event)">Home</a>
  <a href="{% url 'Portfolio' %}" class="base-button" onclick="handleNavigation(event)">Portfolio</a>
  <a href="{% url 'About' %}" class="base-button" onclick="handleNavigation(event)">About</a>    
  <a href="{% url 'Contact' %}" class="base-button" onclick="handleNavigation(event)">Contact</a> 
</div> 

2. 重写JavaScript动画逻辑

利用动画对象的finished Promise等待所有动画完成后再跳转，同时用fill: forwards自动保持动画最终状态：

function handleNavigation(e) {
  // 先阻止默认跳转行为
  e.preventDefault();
  // 记录目标页面的链接
  const targetUrl = e.target.href;

  const logo = document.getElementById("Logo");
  const menu = document.getElementById("Menu");

  // 创建logo动画，fill: forwards让动画结束后保持最终样式
  const logoAnim = logo.animate(
    [
      { left: '50vw', top: '25vh' },
      { left: '5vw', top: '7.5vh' }
    ],
    { duration: 1000, fill: 'forwards' }
  );

  // 创建menu动画，同样设置fill: forwards
  const menuAnim = menu.animate(
    [
      { left: '50vw', top: '40vh', width: '10vw' },
      { left: '0vw', top: '5vh', width: '7.5vw' }
    ],
    { duration: 1000, fill: 'forwards' }
  );

  // 等待两个动画都完成后，手动跳转到目标页面
  Promise.all([logoAnim.finished, menuAnim.finished]).then(() => {
    window.location.href = targetUrl;
  });
}

3. CSS保持原代码不变

.list {
    position: absolute;
    top: 40vh;
    left: 50vw;
}

.base-button {
    display: block;
    background: rgba(190, 193, 197, 0.1);
    background-clip: padding-box;
    text-align: center;
    color: #bec1c5;
    border: none;
    width: 10vw;
    height: 3vh;
    background-clip: text;
    padding: 5px;
    margin-left: -5vw;
    margin-top: -5px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 10px;
    font-size: 20px;
    font-family: Adoring;
}

.image {
    display: block;
    position: absolute;
    margin: auto;
    width: 7.5vw;
    margin-left: -3.75vw;
    margin-top: -3.75vh;
    opacity: 0.75;
}

.logopos {
    position: absolute;
    top: 25vh;
    left: 50vw;
}

关键细节说明 #

• fill: forwards：替代了你原来手动修改style的代码，让动画结束后元素自动保持最后一帧的样式，避免样式闪烁。
• Animation.finished：每个动画对象的finished属性是一个Promise，动画完成时会自动resolve，用Promise.all可以确保所有动画都播放完毕再跳转。
• 手动跳转：通过window.location.href在动画完成后触发跳转，完全符合预期流程。

内容的提问来源于stack exchange，提问作者Aman Basra