Переход не работает в модуле реагирования css ⇐ CSS

[Anonymous]

Я хочу переместить изображение, нажав кнопку «Далее» или «Назад». Когда я нажимаю кнопку «Далее», переход работает хорошо. изображения перемещаются справа налево. но когда я нажимаю кнопку «Предыдущая», переход не работает должным образом. конец правого элемента переходит в конец левого с анимацией перехода. но все остальные элементы не перемещаются слева направо с анимацией перехода. они движутся, как будто телепортируются к месту назначения.

вот мои коды. пожалуйста, помогите мне.
компонент баннера: const [индекс, setIndex] = useState([0, 1, 2, 3, 4, 5]); константные данные=[ { идентификатор: 0, imgUrl: "/banner01.jpg", }, { идентификатор: 1, imgUrl: "/banner02.jpg", }, { идентификатор: 2, imgUrl: "/banner03.jpg", }, { идентификатор: 3, imgUrl: "/banner04.jpg", }, { идентификатор: 4, imgUrl: "/banner05.jpg", }, { идентификатор: 5, imgUrl: "/banner06.jpg", } ] const handleClickNext = () => { setIndex((предыдущий) => { let temp = [...prev, prev[0]]; темп.сдвиг(); вернуть temp.slice(); }); console.log(индекс); }; const handleClickPrev = () => { setIndex((предыдущий)=>{ let temp = [prev[prev.length-1], ...prev]; темп.поп(); вернуть temp.slice(); }); console.log(индекс); }; {index.map((элемент, индекс) => { возвращаться ( ) })} CSS модуль баннера: .элемент { ширина: 200 пикселей; высота: 300 пикселей; фоновая позиция: 50% 50%; трансформировать: транслировать(-50%, -50%); переход: 0,8 с; размер фона: обложка; позиция: абсолютная; z-индекс: 1; верх: 50%; осталось: 50%; радиус границы: 20 пикселей; } .item:первый ребенок{ трансформировать: TranslateX(-250%); } .item:nth-child(2){ трансформировать: TranslateX (-150%); } .item:nth-child(3){ преобразование: TranslateX (-50%); } .item:nth-child(4){ преобразование: TranslateX (50%); } .item:nth-child(5){ преобразование: TranslateX (150%); } .item:nth-child(n+6){ преобразование: TranslateX (250%); }