Блог

У меня есть компонент React, который динамически отображает слайды на странице из slides объекта на основе переменной состояния. Я хотел бы добавить некоторые переходы CSS при входе и выходе слайдов, но, похоже, я не могу найти хороший способ сделать это. Ниже приведен упрощенный пример того, с чем я работаю, но я должен донести эту идею до всех:

 const slides = {
   slide1: {
      id: 1,
      content: <>Slide content</>,
      nextSlide: slide2,
      prevSlide: null
   },
   slide2: {
      id: 2,
      content: <>Slide content</>,
      nextSlide: slide3,
      prevSlide: slide1,
   },
   slide3: {
      id: 3,
      content: <>Slide content</>,
      nextSlide: null,
      prevSlide: slide2
   }
}

const [currentSlide, setCurrentSlide] = useState("slide1")

return (
   <div>
      {slides[currentSlide].content}
      <button onClick={() => setCurrentSlide(slides[currentSlide].prevSlide}
         Previous Slide
      </button>
      <button onClick={() => setCurrentSlide(slides[currentSlide].nextSlide}
         Next Slide
      </button>
   </div>
)
 

Я попытался написать функцию-обработчик, которая устанавливает изменение состояния слайда с задержкой, а затем запускает отдельную переменную состояния, которая вводит имя класса CSS, соответствующее некоторым правилам перехода, в контейнер содержимого, но я не смог заставить его работать так, как я думал. Каков наилучший способ сделать это?