Пользовательский компонент карусели — анимация не работает должным образом ⇐ CSS

[Anonymous]

У меня есть собственный компонент карусели (с использованием React, Typescript и Tailwind) –

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

import React, { useState } from 'react'

interface Slide {
content: React.ReactNode
title: string
description: string
}

interface CarouselProps {
slides: Slide[]
}

const Carousel: React.FC = ({ slides }) => {
const [currentIndex, setCurrentIndex] = useState(0)
const [nextIndex, setNextIndex] = useState(null)
const [animationClass, setAnimationClass] = useState('')

const goToPrevious = () => {
setNextIndex(currentIndex === 0 ? slides.length - 1 : currentIndex - 1)
setAnimationClass('slide-out-right') // Current slide exits to the right
}

const goToNext = () => {
setNextIndex(currentIndex === slides.length - 1 ? 0 : currentIndex + 1)
setAnimationClass('slide-out-left') // Current slide exits to the left
}

const goToSlide = (index: number) => {
if (index > currentIndex) {
setAnimationClass('slide-out-left')
setTimeout(() => setNextIndex(index), 5000)
} else if (index < currentIndex) {
setAnimationClass('slide-out-right')
setTimeout(() => setNextIndex(index), 5000)
}
}

const handleAnimationEnd = () => {
if (nextIndex !== null) {
setCurrentIndex(nextIndex)
setNextIndex(null)
setAnimationClass(
nextIndex > currentIndex ? 'slide-in-left' : 'slide-in-right'
)
}
}

return (



‹



{slides[nextIndex !== null ? nextIndex : currentIndex].content}



›



{slides[currentIndex].title}
{slides[currentIndex].description}

{slides.map((_, index) => (
 goToSlide(index)}
className={`block size-2 cursor-pointer rounded-full ${
index === currentIndex ? 'bg-black' : 'bg-gray-300'
}`}
/>
))}


)
}

export default Carousel

Эти анимации определены в моем globals.css -

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

@keyframes slide-in-left {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}

@keyframes slide-in-right {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}

@keyframes slide-out-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}

@keyframes slide-out-right {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}

.slide-in-left {
animation: slide-in-left 0.5s ease-in-out forwards;
}

.slide-in-right {
animation: slide-in-right 0.5s ease-in-out forwards;
}

.slide-out-left {
animation: slide-out-left 0.5s ease-in-out forwards;
}

.slide-out-right {
animation: slide-out-right 0.5s ease-in-out forwards;
}

На данный момент логика ведет себя странно, и я не могу понять, что делаю не так. На данный момент анимация не плавная, и контент при навигации перемещается в неправильном направлении.
Задуманная логика: когда пользователь перемещается вправо, контент должен сдвигаться влево и новый контент должен скользить справа. Это должно работать и наоборот. Если я перейду влево, контент выдвинется вправо, а новый контент появится слева.

Подробнее здесь: https://stackoverflow.com/questions/791 ... s-intended