Разрыв анимации карусели React, когда установлена ​​продолжительность перехода элемента ⇐ CSS

[Anonymous]

Я работаю над компонентом карусели, внутри которого есть множество дочерних компонентов. Когда пользователь нажимает кнопку «Вращение», компонент карусели перемещается по оси X в течение 6 секунд. Кроме того, во время этой анимации я вычисляю дочерний элемент, который в данный момент находится посередине, и применяю к нему CSS. Моя проблема возникает, когда я применяю стиль с длительностью более 0 мс. Когда продолжительность равна 0 мс, анимация работает правильно, однако, когда продолжительность установлена, например, на 75 мс, анимация компонента карусели не работает должным образом (больше не длится 6 с, а скорее 0,5 с).
`Вот упрощенная версия моей структуры компонентов:
const CaseCarousel = ({ items }) => {
// ... other state and logic

return (
ref={carouselRef}
className="carousel"
style={{
transition: "transform 6s cubic-bezier(0, 0.49, 0.1, 1)",
transform: `translate3d(${animationDistance}px, 0, 0)`
}}
>
{items.map((item) => (

))}

);
};

const CarouselItem: React.FC = ({ imagePath, isMiddle, id }) => {
return (
className={`relative flex flex-col items-center justify-center opacity-80 duration-75 ease-in-out will-change-transform ${
isMiddle ? "scale-110" : ""
} w-[176px] h-[176px]`}
>



className="absolute top-0 right-0 w-full h-full opacity-30 z-[-1]"
style={{
background:
"radial-gradient(50% 50% at 50% 50%, rgb(235, 76, 75) 0%, rgba(74, 34, 34, 0.2) 100%)",
}}
>

);
};
};```


Подробнее здесь: https://stackoverflow.com/questions/787 ... ion-is-set