Как добавить анимацию к простой карусели React?

Question

[lagudal]

Имеется простая реализация карусели - все нормально, но хочется добавить анимации слайдам - просто fade-in(out) в начале-конце показа слайда.
Вроде есть вот решение, но что то не срабатывает, даже если чисто один к одному копирую что там по тексту, в консоли ошибка:

in.242eb634b702bd9fbbc8.hot-update.js:39 Uncaught TypeError: Cannot read properties of undefined (reading 'id')

Как то может проще можно сделать?

Код

import React, { useState, useEffect } from 'react'
import { BsChevronCompactLeft, BsChevronCompactRight, BsDot } from 'react-icons/bs'
import Slide_1 from '../assets/slide1.jpg'
import Slide_2 from '../assets/slide2.jpg'
import Slide_3 from '../assets/slide3.jpg'


const slides = [

  {
    url: Slide_1
  },
  {
    url: Slide_2
  },
  {
    url: Slide_3
  },
];

function Hero() {

  const [currentIndex, setCurrentIndex] = useState(0);



  const prevSlide = () => {
    const isFirstSlide = currentIndex === 0;
    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
    setCurrentIndex(newIndex);
  }
  const nextSlide = () => {
    const isLastSlide = currentIndex === slides.length - 1;
    const newIndex = isLastSlide ? 0 : currentIndex + 1;
    setCurrentIndex(newIndex);
  }

  const goToSlide = (slideIndex) => {
    setCurrentIndex(slideIndex);
  }

  useEffect(() => {
    const interval = setInterval(nextSlide, 4000);
    return () => clearInterval(interval);
  }, [ currentIndex ]);

  return (
    <div className='w-full h-auto mx-auto my-8'>

      <div className='w-full max-w-[1280px] h-auto mx-auto duration-500 relative group'>
        <img className='mx-auto border-gray-100 border-[10px]' src={slides[currentIndex].url} alt="" />
        {/* left arrow */}
        <div className='opacity-30 group-hover:opacity-100 absolute top-[50%] -translate-x-0 translaty-[-50%] left-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer'>
          <BsChevronCompactLeft onClick={prevSlide} size={30} />
        </div>

        {/* right arrow */}
        <div className='opacity-30 group-hover:opacity-100 absolute top-[50%] -translate-x-0 translaty-[-50%] right-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer'>
          <BsChevronCompactRight onClick={nextSlide} size={30} />
        </div>
      </div>

      <div className="flex top-4 justify-center py-2">
        {slides.map((slide, slideIndex) => (
          <div key={slideIndex} onClick={() => goToSlide(slideIndex)} className='text-2xl cursor-pointer'>
            <BsDot />
          </div>
        ))}
      </div >
    </div>
  )
}

export default Hero

Answer 1

[0xD34F]

https://reactcommunity.org/react-transition-group/...

https://jsfiddle.net/j3902ws1/

Comments

[lagudal]

все глаза проглядел, почему в моем коде не работает?

Код

import React, { useState, useEffect, useRef } from 'react'
import { BsChevronCompactLeft, BsChevronCompactRight, BsDot } from 'react-icons/bs'
import Slide_1 from '../assets/slide1.jpg'
import Slide_2 from '../assets/slide2.jpg'
import Slide_3 from '../assets/slide3.jpg'
import { SwitchTransition, CSSTransition } from 'react-transition-group'


const slides = [

  {
    url: Slide_1
  },
  {
    url: Slide_2
  },
  {
    url: Slide_3
  },
];


function Hero() {

  const [currentIndex, setCurrentIndex] = useState(0);

  const slideRef = useRef();

  const prevSlide = () => {
    const isFirstSlide = currentIndex === 0;
    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
    setCurrentIndex(newIndex);
  }
  const nextSlide = () => {
    const isLastSlide = currentIndex === slides.length - 1;
    const newIndex = isLastSlide ? 0 : currentIndex + 1;
    setCurrentIndex(newIndex);
  }

  const goToSlide = (slideIndex) => {
    setCurrentIndex(slideIndex);
  }

  useEffect(() => {
    const interval = setTimeout(nextSlide, 4000);
    return () => clearTimeout(interval);
  }, [currentIndex]);

  return (
    <div className='w-full h-auto mx-auto my-8'>

      <div className='w-full max-w-[1280px] h-auto mx-auto duration-500 relative group'>
        <SwitchTransition mode="out-in">
          <CSSTransition
            key={currentIndex}
            nodeRef={slideRef}
            addEndListener={done => slideRef.current.addEventListener('transitionend', done, false)}
            classNames="fade"
          >
            <div ref={slideRef}>
              <img className='mx-auto border-gray-100 border-[10px]' src={slides[currentIndex].url} alt="" />
            </div>
          </CSSTransition>
        </SwitchTransition>
        {/* left arrow */}
        <div className='opacity-30 group-hover:opacity-100 absolute top-[50%] -translate-x-0 translaty-[-50%] left-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer'>
          <BsChevronCompactLeft onClick={prevSlide} size={30} />
        </div>

        {/* right arrow */}
        <div className='opacity-30 group-hover:opacity-100 absolute top-[50%] -translate-x-0 translaty-[-50%] right-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer'>
          <BsChevronCompactRight onClick={nextSlide} size={30} />
        </div>
      </div>

      <div className="flex top-4 justify-center py-2">
        {slides.map((slides, slideIndex) => (
          <div key={slideIndex} onClick={() => goToSlide(slideIndex)} className='text-2xl cursor-pointer'>
            <BsDot />
          </div>
        ))}
      </div >
    </div>
  )
}

export default Hero

[lagudal]

а нет. все работает - css забыл подключить, спасибо )