如何实现点击flip按钮后div逐个翻转（flip）的效果？

嘿，我明白你想让点击flip按钮后，每个数字卡片逐个翻转的需求啦！咱们可以通过给每个卡片添加递增的动画延迟，配合JavaScript依次触发翻转状态，就能轻松实现这个效果。下面是具体的修改步骤和代码：

1. 保留基础HTML结构（无需大改） #

<div class="row numList flip-panel">
  <div class="col-md-5ths">
    <div class="num front"> 1 </div>
    <div class="num back"> 2 </div>
  </div>
  <div class="col-md-5ths">
    <div class="num front"> 2 </div>
    <div class="num back"> 3 </div>
  </div>
  <div class="col-md-5ths">
    <div class="num front"> 3 </div>
    <div class="num back"> 4 </div>
  </div>
  <div class="col-md-5ths">
    <div class="num front"> 4 </div>
    <div class="num back"> 5 </div>
  </div>
  <div class="col-md-5ths">
    <div class="num front"> 5 </div>
    <div class="num back"> 6 </div>
  </div>
</div>
<button class="flip-btn">flip</button>

2. 调整CSS，支持延迟翻转 #

先确保你的基础翻转动画已经生效（比如用transform: rotateY(180deg)配合过渡效果），再新增翻转状态类和延迟控制的基础样式：

/* 基础翻转容器样式 */
.col-md-5ths {
  position: relative;
  width: 100%;
  height: 60px;
  perspective: 1000px;
}

/* 前后两面的基础样式 */
.num {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: transform 0.6s ease;
}

.back {
  transform: rotateY(180deg);
}

/* 新增：翻转触发的状态类 */
.col-md-5ths.flipped .front {
  transform: rotateY(180deg);
}
.col-md-5ths.flipped .back {
  transform: rotateY(0deg);
}

3. 编写JavaScript逻辑，实现逐个翻转 #

点击按钮时，遍历每个卡片容器，给它们依次添加flipped类，并且设置递增的时间间隔：

const flipBtn = document.querySelector('.flip-btn');
const cardContainers = document.querySelectorAll('.col-md-5ths');

flipBtn.addEventListener('click', () => {
  // 先重置所有卡片状态（支持重复点击翻转）
  cardContainers.forEach(container => {
    container.classList.remove('flipped');
  });

  // 逐个触发翻转，每个卡片延迟200ms（可按需调整）
  cardContainers.forEach((container, index) => {
    setTimeout(() => {
      container.classList.add('flipped');
    }, index * 200);
  });
});

可选：支持来回切换翻转 #

如果想让点击按钮时，卡片能在正反状态间来回切换，可以把JS逻辑改成这样：

flipBtn.addEventListener('click', () => {
  cardContainers.forEach((container, index) => {
    setTimeout(() => {
      container.classList.toggle('flipped');
    }, index * 200);
  });
});

这样调整后，点击flip按钮，你的数字卡片就会一个接一个地完成翻转啦！

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