Реагировать на анимацию рендеринга очень непоследовательно для карусели задом наперед; что мне не хватает? ⇐ CSS

[Anonymous]

Я так расстроен и готов рвать на себе волосы, потому что React, похоже, не хочет быть последовательным, но я знаю, что мне как разработчику чего-то не хватает.
Я работаю над каруселью элементов сзади вперед. Перемещение вперед работает отлично, анимация во всем приятная и чистая. Однако цикл назад (который обычно повторяет те же шаги, что и цикл вперед) не хочет плавной анимации, несмотря ни на что. Вот код карусели:
import useTimeout from "@/lib/hooks/useTimeout"
import { ChevronDown, ChevronUp } from "lucide-react"
import { CSSProperties, MouseEvent, useEffect, useRef, useState } from "react"

export type CarouselItem = {
key: string | number | bigint
title: string
element: React.ReactNode
}

type ForwardCarouselProps = {
containerStyle?: CSSProperties
content: [CarouselItem, CarouselItem, CarouselItem, ...CarouselItem[]] // minimum 3 items CarouselItem array
maxDisplayItems?: number
}

export default function ForwardCarousel({ containerStyle, content, maxDisplayItems } : ForwardCarouselProps) {
const displayCount: number = Math.max(maxDisplayItems || content.length, 3)

const [currentItemIndex, setCurrentItemIndex] = useState(0)

const backwardTimer = useTimeout()
const forwardTimer = useTimeout()

function getPreviousItemIndex() {
return currentItemIndex === 0 ? content.length - 1 : currentItemIndex - 1
}

function getNextItemIndex() {
return currentItemIndex === content.length - 1 ? 0 : currentItemIndex + 1
}

function cycleBackward(event: MouseEvent) {
event.preventDefault()
backwardTimer.begin(50)
setCurrentItemIndex(getPreviousItemIndex())
}

function cycleForward(event: MouseEvent) {
event.preventDefault()
forwardTimer.begin(50)
setCurrentItemIndex(getNextItemIndex())
}

function oneWayCyclicalSlice(arr: ArraySign Up
Log In



)
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... rousel-wha