Доброго времени суток!
Я только учусь и поэтому прошу сильно не ругать за возможные глупости! :)
Делаю учебный проект интернет магазина на React.js + Redux, так вот сделал я компонент по типу слайдера и выглядит он примерно вот так:
работает он следующим образом - при нажати на круглую кнопку меняется картинка.
Реализовал я это так - круглые кнопки рендерятся автоматически и их количество зависит от количества картинок, а картинки в свою очередь загружаются с json-server(a) в виде ссылок на wampi и сохраняются в Redux, так же в Redax хранится активный индекс картинки которая должна быть показана, а этот индекс меняется при нажатии на одну из круглых кнопок из-за чего в свою очередь меняется картинка.
А моя проблема заключается в том, что я хочу, чтобы при переключении изображения она анимировалась.
Прошу помочь с данной проблемой, дать направления для поиска решения или похожие готовые решения.
Готовые библиотеки желательно не предлагать (но можно), хочу решить проблему именно в таком виде как сейчас.
Пытался по разному анимировать, но максимум, что у меня получалось - это анимация первого изображения при обновлении страницы.
ниже приведу код компонента: в пропсах компонента приходят следующие данные:
promoItems - приходит массив с объектами такого типа
[ { "id": 0, "promoURL": "https://ic.wampi.ru/2021/07/24/promo_1.png" }, { "id": 1, "promoURL": "https://ic.wampi.ru/2021/07/24/promo_2.jpg" }, { "id": 2, "promoURL": "https://ic.wampi.ru/2021/07/24/promo_3.jpg" } ]
onClickActivePromo - приходит функция меняющая активный индекс картинки
activeIndex - активный индекс который хранится в Redux и меняется после нажатия круглой кнопки и вызова функции выше
import React from 'react';
import PropTypes from 'prop-types';
function DiscountsBanners({promoItems, onClickActivePromo, activeIndex}) {
const promoImgArr = promoItems.map((obj) => obj.promoURL);
const promoImg = promoImgArr[activeIndex];
const onSelectActivePromo = (index) => {
onClickActivePromo(index);
};
return (
<section className='discounts-bunners'>
<h2 className='visually-hidden'>Баннеры проходящих акций и скидок</h2>
<ul>
<li className='discounts-bunners__bunner-item'>
<img
className='discounts-bunners__bunner-mob'
src={promoImg} alt=''/>
</li>
<li className='discounts-bunners__bunner-item'>
<img
className='discounts-bunners__bunner-desktop'
src={promoImg} alt=''/>
</li>
</ul>
<div className='discounts-bunners__toggles-wrapper'>
<ul className='discounts-bunners__toggles'>
{
Array(promoItems.length)
.fill(0)
.map((_, index) =>
<li
key={index}
className={
activeIndex === index ?
`discounts-bunners__toggle
discounts-bunners__toggle_current` :
'discounts-bunners__toggle'
}
onClick={() => onSelectActivePromo(index)} >
</li>,
)
}
</ul>
</div>
</section>
);
}
export default DiscountsBanners;
DiscountsBanners.propTypes = {
promoItems: PropTypes.array.isRequired,
onClickActivePromo: PropTypes.func.isRequired,
activeIndex: PropTypes.number.isRequired,
};