Всем привет, есть следующий код:
import React, { useEffect, useState } from 'react';
const Background: React.FC = () => {
const images = [ "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg" ];
const [currentImage, setCurrentImage] = useState("")
const [imageIndex, setImageIndex] = useState(0);
const changeId = () => setImageIndex(id => id + 1);
useEffect(() => {
window.addEventListener("click", changeId);
return () => window.removeEventListener("click", changeId);
}, [])
useEffect(() => {
setCurrentImage(images[imageIndex]);
}, [imageIndex])
return (
<img
src={currentImage}
alt={"background"}
/>
);
};
export default Background;
Как вы могли догадаться, при нажатии на кнопку мыши, меняется картинка из массива. Задача следующая - нужно чтобы изменение было с анимацией - плавный переход в полностью чёрное, и плавное появление уже новой картинки. В случае, если пользователь кликает слишком быстро, анимацию необходимо прервать и просто отобразить следующую картинку.
- Пробовал использовать css анимацию, но почему-то изображение сначала "моргало", а потом переключалось.
- Я пробовал использовать событие onTransitionEnd, но иногда (если слишком быстро кликать) это не срабатывало, и в результате новая картинка не появлялась, а оставался только черный экран.
Только не надо отвечать загадками или только ссылаться на какие-то другие библиотеки без подробной росписи как с ней работать в контексте моей задачи
Простой
Средний
