Непоследовательное реагирование на анимацию рендеринга для карусели задом наперед. ⇐ CSS

[Anonymous]

При карусели предметов спиной к переднему цикл вперед работает. Однако движение назад не обеспечивает плавной анимации:

Код: Выделить всё

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: Array[url={PAGE_SIGNUP} className=]Sign Up[/url]
[url={PAGE_LOGIN} className=]Log In[/url]



)
}

Минимально воспроизводимый пример. Возможно, вам придется развернуть окно предварительного просмотра CodeSandbox, чтобы увидеть кнопки.

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