为什么旋转木马图像在React中闪烁

Question

我已经添加了carousel功能，但是每当我点击下一个图标时图像都会闪烁。因为我只有两张图像，所以我似乎得到了前一张图像或下一张图像的反射。我用顺风反应。我在下面添加了一个gif，这样大家就可以看到问题了。我每次都有点闪动。但我的屏幕录像机只是第一次显示它。

链接到Gif

Index.css

.slide-in-from-right {
animation: slideInFromRight 0.5s ease-in;
}
.slide-out-to-left {
animation: slideOutToLeft 0.5s ease-in;
}
@keyframes slideInFromRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0%);
}
}
@keyframes slideOutToLeft {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}

<<p>英雄幻灯片/strong>

let count = 0;
export default function HeroSlideshow() {
const [slide, setSlide] = useState({});
const [clonedSlide, setClonedSlide] = useState({});
const [slides, setSlides] = useState([]);
const [currentIndex, setCurrentIndex] = useState(0);
const slideRef = useRef();
const clonedSlideRef = useRef();
const { updateNotification } = useNotification();
const fetchLatestUploads = async () => {
const { error, movies } = await getLatestUploads();
if (error) return updateNotification("error", error);
setSlides([...movies]);
setSlide(movies[0]);
};
//0,1,2,3,4
const handleOnNextClick = () => {
setClonedSlide(slides[count]);
clonedSlideRef.current.classList.add("slide-out-to-left");
count = (count + 1) % slides.length;
setSlide(slides[count]);
setCurrentIndex(count);
slideRef.current.classList.add("slide-in-from-right");
};
const handleAnimationEnd = () => {
slideRef.current.classList.remove("slide-in-from-right");
clonedSlideRef.current.classList.remove("slide-out-to-left");
setClonedSlide({});
};
useEffect(() => {
fetchLatestUploads();
}, []);
return (
<div className="w-full flex">
{/* Slide show section */}
<div className="w-4/5 aspect-video relative overflow-hidden">
<img
ref={slideRef}
onAnimationEnd={handleAnimationEnd}
className="aspect-video object-cover"
src={slide.poster}
alt=""
/>
<img
ref={clonedSlideRef}
onAnimationEnd={handleAnimationEnd}
className="aspect-video object-cover absolute inset-0"
src={clonedSlide.poster}
alt=""
/>
<SlideShowController onNextClick={handleOnNextClick} />
</div>
{/* Up Next Section */}
<div className="w-1/5 aspect-video bg-red-300"></div>
</div>
);
}
const SlideShowController = ({ onNextClick, onPrevClick }) => {
const btnClass =
"bg-primary rounded border-2 text-white text-xl p-2 outline-none";
return (
<div className="absolute top-1/2 -translate-y-1/2 w-full flex items-center justify-between px-2">
<button onClick={onPrevClick} className={btnClass} type="button">
<AiOutlineDoubleLeft />
</button>
<button onClick={onNextClick} className={btnClass} type="button">
<AiOutlineDoubleRight />
</button>
</div>
);
};

Answer 1

如果我不能重现这个问题，很难回答，但我对发生了什么有一个线索。当你调用handleOnNextClick的方法时，你必须记住，幻灯片的索引(实际上是显示它被选中)几乎会立即改变，但动画slideInFromRight和slideOutToLeft正在取。5秒因此，您可以尝试使用setTimeout来触发幻灯片的索引更改。

const handleOnNextClick = () => {
clonedSlideRef.current.classList.add("slide-out-to-left");
slideRef.current.classList.add("slide-in-from-right");
count = (count + 1) % slides.length;
setTimeout(() => {
setClonedSlide(slides[count]);
setSlide(slides[count]);
setCurrentIndex(count);
}, 500)
};

希望有帮助!