JavaScript移动Div最后子元素问题：卡片移动动画异常求助

嘿，我来帮你搞定这个动画触发的问题！你遇到的核心问题是没有给正在执行动画的卡片加状态锁，导致重复点击按钮时旧动画被中断、元素重置；同时删除逻辑没区分动画状态，直接移除导致卡片突然消失。下面是具体的解决方案：

1. 给卡片添加动画状态标记 #

我们可以用CSS类或者自定义属性标记正在动画的卡片，点击按钮时先检查这个状态，跳过正在动画的卡片，避免重复触发。

2. 绑定动画结束事件，完成后再处理卡片 #

动画结束后再移除卡片（而不是直接删除），既保证动画完整执行，也不会出现突然消失的问题，同时清除状态标记，让卡片可以被后续操作触发（如果需要的话）。

具体代码修改示例 #

假设你用CSS动画实现移动效果： #

首先定义CSS动画类：

/* 卡片移出动画 */
.slide-out {
  animation: slideOut 0.6s forwards;
}

@keyframes slideOut {
  to {
    transform: translateX(-120%);
    opacity: 0;
    pointer-events: none; /* 动画过程中禁止点击 */
  }
}

然后修改JavaScript逻辑：

// 假设你创建卡片的函数大概是这样
function addCardWithProgress() {
  const card = document.createElement('div');
  card.className = 'card';
  // 添加进度条元素和逻辑...
  document.getElementById('card-container').appendChild(card);
}

// 绑定moveCard按钮点击事件
document.querySelector('.moveCard').addEventListener('click', () => {
  const cards = document.querySelectorAll('.card');
  
  cards.forEach(card => {
    // 检查卡片是否正在动画，如果是直接跳过
    if (card.classList.contains('is-animating')) return;
    
    // 标记卡片为正在动画状态
    card.classList.add('is-animating', 'slide-out');
    
    // 监听动画结束事件
    card.addEventListener('animationend', function handleEnd() {
      // 清除状态和动画类
      card.classList.remove('is-animating', 'slide-out');
      // 动画完成后移除卡片
      card.remove();
      // 移除事件监听，避免内存泄漏
      this.removeEventListener('animationend', handleEnd);
    });
  });
});

如果你用JavaScript的animate()方法： #

document.querySelector('.moveCard').addEventListener('click', () => {
  const cards = document.querySelectorAll('.card');
  
  cards.forEach(card => {
    // 用自定义属性标记动画状态
    if (card.dataset.animating === 'true') return;
    
    card.dataset.animating = 'true';
    // 执行动画
    const animation = card.animate(
      [
        { transform: 'translateX(0)', opacity: 1 },
        { transform: 'translateX(-120%)', opacity: 0 }
      ],
      { duration: 600, fill: 'forwards' }
    );
    
    // 动画完成后处理
    animation.onfinish = () => {
      card.dataset.animating = 'false';
      card.remove();
    };
    
    // 动画被中断时也清除状态（可选）
    animation.oncancel = () => {
      card.dataset.animating = 'false';
    };
  });
});

关键要点说明 #

• 状态锁：通过is-animating类或dataset.animating属性，确保同一卡片不会同时执行多个动画，避免重置问题。
• 动画结束后移除：不再直接删除卡片，而是等动画完全执行完毕后再移除，解决突然消失的问题。
• 清除事件监听：避免同一个卡片多次绑定animationend事件，造成内存泄漏。

这样修改后，卡片开始移动后就不会被后续点击干扰，动画会完整执行后再消失，完全符合你的需求！

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