如何实现带图片翻转效果的轮播组件？代码调整咨询

目前已完成基础轮播功能，但仅能实现图片切换，翻转效果与轮播功能相互独立，无法协同工作，需要调整代码实现正确的翻转轮播效果。

现有HTML代码 #

设置了正反两面均有图片的卡片：

<div className={s.slider}>
    <div className={s.sliderImg} key={activeIndex}>
        <div className={s.front}>{img[activeIndex]}</div>
        <div className={s.back}>{img[nextImgIndex]}</div>
    </div>
</div>

现有CSS代码 #

可实现卡片翻转，但效果不符合预期：

.slider {
    position: absolute;
    top: 348px;
    left: 776px;
    width: 395px;
    height: 400px;
    margin: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
    perspective: 1000;
}
 
.sliderImg {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.6s;
    transform-style: preserve-3d;
}

.slider:hover .sliderImg {
    transform: rotateY(180deg);
}

.sliderImg img {
    width: 100%;
    height: 100%;
}

.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.front {
    z-index: 2;
}
 
.back {
    transform: rotateY(180deg);
}

现有JS代码 #

图片通过定时器切换：

const [activeIndex, setActiveIndex] = useState<number>(0);

useEffect(() => {
    const interval = setInterval(() => {
        setActiveIndex((current) => {
            const res = current === img.length - 1 ? 0 : current + 1
            return res
        })
    }, 5000)
    return () => clearInterval(interval)
}, [])

const nextImgIndex = activeIndex === img.length - 1 ? 0 : activeIndex + 1

解决方案 #

核心思路是让轮播切换时触发翻转动画，翻转完成后再更新图片索引，避免切换和翻转不同步。

1. 添加翻转状态控制
   在JS中新增状态标记当前是否正在执行翻转动画，避免定时器重复触发：

   import { useState, useEffect, useMemo } from 'react'; // 补充导入useMemo
   
   const [activeIndex, setActiveIndex] = useState<number>(0);
   const [isFlipping, setIsFlipping] = useState<boolean>(false); // 新增翻转状态
   

2. 修改定时器逻辑
   仅在非翻转状态下触发翻转，等待动画完成后更新图片索引：

   useEffect(() => {
       const interval = setInterval(() => {
           if (!isFlipping) {
               setIsFlipping(true);
               // 等待0.6s（对应CSS的transition时长）后更新索引并结束翻转状态
               setTimeout(() => {
                   setActiveIndex(current => current === img.length - 1 ? 0 : current + 1);
                   setIsFlipping(false);
               }, 600);
           }
       }, 5000);
       return () => clearInterval(interval);
   }, [isFlipping]);
   

3. 调整CSS触发条件
   将hover触发改为状态控制的类名触发，让翻转由JS状态主导：

   /* 移除原hover触发规则 */
   /* .slider:hover .sliderImg {
       transform: rotateY(180deg);
   } */
   
   /* 新增翻转类，由JS状态控制添加 */
   .sliderImg.flipped {
       transform: rotateY(180deg);
   }
   

4. 更新HTML结构
   根据isFlipping状态给卡片添加翻转类，触发动画：

   <div className={s.slider}>
       <div className={`${s.sliderImg} ${isFlipping ? 'flipped' : ''}`} key={activeIndex}>
           <div className={s.front}>{img[activeIndex]}</div>
           <div className={s.back}>{img[nextImgIndex]}</div>
       </div>
   </div>
   

5. 优化图片索引计算
   用useMemo缓存下一张图片索引，避免不必要的重复计算：

   const nextImgIndex = useMemo(() => {
       return activeIndex === img.length - 1 ? 0 : activeIndex + 1;
   }, [activeIndex, img.length]);
   

修改后，轮播会自动触发翻转动画，翻转完成后更新图片，实现翻转与轮播的协同工作。若需保留鼠标hover翻转的交互，可保留原hover的CSS规则，不影响自动轮播逻辑。

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