滚动触发卡片正反翻转并暂停2秒的技术实现求助

要实现卡片翻到背面后2秒自动翻回正面，核心是用setTimeout延迟执行翻回逻辑，同时加入状态锁避免重复触发。以下是具体修改步骤：

1. 确保CSS支持双向翻转 #

假设你的卡片CSS已有翻转到背面的样式，补充翻回正面的过渡逻辑（如果没有的话）：

/* 基础卡片样式 */
.card {
  position: relative;
  width: 200px;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease; /* 统一过渡动画 */
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

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

/* 翻转到背面的类 */
.card.flip-to-back {
  transform: rotateY(180deg);
}

/* 翻转回正面的类（也可直接移除flip-to-back，显式定义更清晰） */
.card.flip-to-front {
  transform: rotateY(0deg);
}

2. 修改JavaScript逻辑 #

添加状态锁和延迟翻回的代码，避免滚动时重复触发：

const card = document.querySelector('.card');
const orangeSection = document.querySelector('.orange');
let isProcessing = false; // 状态锁，防止重复执行

window.addEventListener('scroll', () => {
  const orangeRect = orangeSection.getBoundingClientRect();
  // 检测是否进入橙色区域（可根据需求调整触发条件，比如区域顶部进入视口）
  const isEnterOrange = orangeRect.top <= window.innerHeight && orangeRect.bottom >= 0;

  if (isEnterOrange && !isProcessing) {
    isProcessing = true;
    
    // 第一步：翻到背面
    card.classList.add('flip-to-back');
    card.classList.remove('flip-to-front');

    // 第二步：2秒后翻回正面
    setTimeout(() => {
      card.classList.remove('flip-to-back');
      card.classList.add('flip-to-front');
      
      // 等待翻回动画完成后重置状态锁（和CSS过渡时间保持一致）
      setTimeout(() => {
        isProcessing = false;
      }, 600);
    }, 2000);
  }
});

关键说明 #

• 状态锁isProcessing：避免用户快速滚动时多次触发翻转逻辑，防止动画混乱。
• setTimeout延迟：2秒的延迟对应需求中的暂停时间，内部嵌套的setTimeout是为了等待翻回动画完成后再解锁，避免提前触发下一次翻转。
• 触发条件调整：如果需要更精确的触发时机（比如卡片完全进入橙色区域时），可以修改isEnterOrange的判断逻辑，例如orangeRect.top <= 0 && orangeRect.bottom >= window.innerHeight。

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