如何实现DIV卡片点击轮播切换？修复动画与批量适配问题

一、修复.removeanimate动画失效问题 #

问题根源 #

自定义动画不生效通常是这几个原因：

• @keyframes 名称与 animation 属性引用的名称不匹配
• 动画属性不完整，缺少时长、填充模式等关键参数
• 元素被 display: none 这类会中断动画的样式直接隐藏

修复方案 #

调整CSS代码，确保动画定义完整且生效：

/* 定义移除动画的关键帧 */
@keyframes slideOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

/* 应用动画的类 */
.removeanimate {
  animation: slideOutLeft 0.5s forwards; /* forwards 保持动画结束后的状态 */
  pointer-events: none; /* 动画期间禁止点击，避免误操作 */
}

注意：不要用 display: none 来隐藏动画中的元素，改用 opacity 和 transform 实现过渡，否则动画会被直接中断。

二、优化JS代码实现批量适配与循环切换逻辑 #

问题根源 #

原代码给每个卡片单独绑定点击事件，卡片数量多的时候会造成性能浪费；且 toggleClass('go') 的逻辑无法控制循环顺序，会导致显示混乱。

优化方案 #

采用事件委托绑定点击事件（仅绑定到父容器一次），通过维护当前激活索引实现循环切换：

假设HTML结构（父容器包裹所有卡片）

<div class="card-wrap">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <!-- 可添加任意数量卡片 -->
</div>

配套CSS（控制卡片显示/隐藏的基础样式）

.card-wrap {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.5s ease;
  cursor: pointer;
}

.card.active {
  opacity: 1;
  transform: translateX(0);
}

优化后的jQuery代码

$(function() {
  const $cardWrap = $('.card-wrap');
  const $cards = $cardWrap.find('.card');
  const total = $cards.length;
  let currentIdx = 0;

  // 初始化显示第一张卡片
  $cards.eq(currentIdx).addClass('active');

  // 事件委托：仅在父容器绑定一次点击事件
  $cardWrap.on('click', '.card.active', function() {
    // 当前卡片执行移除动画
    const $currentCard = $cards.eq(currentIdx);
    $currentCard.removeClass('active').addClass('removeanimate');

    // 计算下一个卡片的索引（循环逻辑：最后一张之后回到第一张）
    currentIdx = (currentIdx + 1) % total;

    // 等待移除动画结束后，显示下一张卡片并重置动画类
    setTimeout(() => {
      $cards.removeClass('removeanimate');
      $cards.eq(currentIdx).addClass('active');
    }, 500); // 时间需与动画时长保持一致
  });
});

代码优势 #

• 事件委托：无论卡片数量多少（哪怕100张），仅需绑定一次事件，性能更优
• 循环逻辑：通过取余运算 (currentIdx + 1) % total 实现无缝循环
• 动画衔接：等待移除动画结束后再显示下一张，避免视觉冲突

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