React. Присвоение класса тегу по таймауту. Как реализовать?
Всем привет! У меня в jsx есть кнопка, отвечающая за лайк, и в неё я хочу добавить сложную анимацию. Сложность в том, что несколько классов должны присваиваться с некоторым промежутком времени. То есть кликнули, присвоился класс, через секунду второй. Компонента функциональная. Как правильно подойти к решению этой задачи? У меня все идеи сводятся к тому, что нужно юзать state (я использую redux), но это кажется избыточным. Простые решения, вроде функции, возвращающей классы по setTimeout, не заработали.
Сейчас у меня код выглядит примерно так.
const likeAnimation = s.animation + ' ' + s.someClass;
return (
<button
onClick={() => toggleLike ()}
className={s.likeButton + ' ' +
(props.photo.liked_by_user ? '' : likeAnimation)
}>
{props.photo.likes}
</button>
)
Без таймаута всё хорошо работает. Задача в том, чтобы по клику сначала добавился s.animation, а через определённое время s.someClass.
Примеры моего неработающего кода с использованием setTimeout приводить не буду - их было много и я вконец запутался.