如何实现720px以下移动端滚动入视口时触发flip card翻转效果

实现方案 #

1. 调整CSS代码

在原有CSS基础上新增以下内容，仅对宽度小于720px的移动设备生效：

@media only screen and (max-width: 719.98px) {
  /* 禁用移动端hover翻转，避免误触，需要保留可删除这段 */
  .flip-card:hover .flip-card-inner {
    transform: none;
  }
  /* 卡片进入视口后触发翻转的类 */
  .flip-card.flip-in-view .flip-card-inner {
    transform: rotateY(180deg);
  }
}

2. 新增JS代码

将以下代码插入到页面</body>标签前即可，采用性能更优的Intersection Observer实现滚动监听，不会造成页面卡顿：

// 仅在屏幕宽度小于720px时执行逻辑
if (window.innerWidth < 720) {
  const flipCards = document.querySelectorAll('.flip-card');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // 卡片30%以上区域进入视口时触发翻转
      if (entry.isIntersecting && entry.intersectionRatio >= 0.3) {
        entry.target.classList.add('flip-in-view');
        // 只需翻转一次保留此行，需要每次进入视口都翻转就删除此行
        observer.unobserve(entry.target);

        // 需要卡片离开视口后翻回正面，取消下面三行注释即可
        // } else {
        //   entry.target.classList.remove('flip-in-view');
      }
    })
  }, {
    threshold: 0.3 // 调整数值可修改触发翻转的视口进入比例，范围0~1
  });
  // 监听所有翻转卡片
  flipCards.forEach(card => observer.observe(card));
}

注意事项

• 原有HTML代码无需任何修改，直接复用现有结构即可
• 翻转动画速度和原有hover效果保持一致，无需额外调整
• 若不需要限制仅翻转一次，删除代码中observer.unobserve(entry.target)行即可

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