Tengo un componente React que muestra dinámicamente las diapositivas en la página desde un objeto de slides en función de una variable de estado. Me gustaría agregar algunas transiciones CSS cuando las diapositivas entran y salen, pero parece que no puedo encontrar una buena manera de hacerlo. A continuación se muestra un ejemplo simplificado de lo que estoy trabajando, pero debería transmitir la idea:

 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> )

Intenté escribir una función de controlador que establece el cambio de estado de la diapositiva en un retraso y luego activa una variable de estado separada que inyecta un nombre de clase CSS correspondiente a algunas reglas de transición en el contenedor de contenido, pero no pude hacerlo funcionar como yo Pensé que lo haría. ¿Cuál es la mejor manera de hacer esto?